Image position with pixel-
We can set the position of background image using pixel:
Example-1
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>Background position with pixel </title>
<style>
body {
background-image: url(“pxbg.jpg”);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 250px 350px;
}
</style>
</head>
<body>
<h1>The background-position Property</h1>
<p>Here, the background image is positioned 250px from the left, and 350px down from the top.</p>
</body>
</html>
-x and -y
We can repeat a background image only vertically or horizontally using -y and -x.
Example-2
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>Repeat vertically</title>
<style>
body {
background-image: url(“pxbg.jpg”);
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h1>The background-repeat Property</h1>
<p>Here, the background image is repeated only vertically.</p>
</body>
</html>
Example-3
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>Repeat Horizontally</title>
<style>
body {
background-image: url(“pxbg.jpg”);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>The background-repeat Property</h1>
<p>Here, the background image is repeated only horizontally.</p>
</body>
</html>
space:
Example -4
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>Space</title>
<style>
body{
background-image:url(“space.jpg”);
background-repeat:space;
}
</style>
</head>
<body>
<h2>background-repeat: space</h2>
</body>
</html>
round:
Example-5
<!DOCTYPE html>
<html lang=”en-US”>
<head>
<title>Round</title>
<style>
body{
background-image:url(“pxbg.jpg”);
background-repeat:round;
}
</style>
</head>
<body>
<h1>background-repeat: round</h1>
</body>
</html>
Computer Technology 