- The background-position property in CSS is used to specify the starting position of a background image within its container. It determines where the image will be placed in relation to the container's borders.
The background-position property accepts different values:
- Keyword values: You can use keywords like top, bottom, left, right, and center to position the background image accordingly. For example, background-position: top right; will position the image at the top right corner of the container.
- Length values: You can use length values such as pixels (px), percentages (%), or other valid CSS length units to set the precise position of the background image. For example, background-position: 10px 20px; will position the image 10 pixels from the left and 20 pixels from the top of the container.
- Percentage values: You can use percentage values to position the background image relative to the container's dimensions. For example, background-position: 50% 25%; will position the image at the horizontal center (50%) and 25% from the top of the container.
- Multiple values: You can provide two values separated by a space to set the horizontal and vertical positions independently. For example, background-position: left center; will position the image at the left center of the container.
- Program 01:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
- or
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: top left;
/* also we write "left top" */
}
</style>
- Output:
- Program 02:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: top;
}
</style>
- or
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: top center;
/* also we write "center top" */
}
</style>
- Output:
- Program 03:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: bottom;
}
</style>
- Output:
- Program 04:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: left;
}
</style>
- or
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: center left;
/* also we write "left center" */
}
</style>
- Output:
- Program 05:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: right;
}
</style>
- or
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: center right;
/* also we write "right center" */
}
</style>
- Output:
- Program 06:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: top right;
/* also we write "right top" */
}
</style>
- Output:
- Program 07:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: center;
}
</style>
- Output:
- Program 08:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: bottom left;
}
</style>
- Output:
- Program 09:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: right bottom;
}
</style>
- Output:
- Program 10:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: right 20px bottom 120px;
/* margin-right 20px and margin-bottom 120px, on the "background-position": right bottom; */
}
</style>
- Output:
- Program 11:
<style>
.container {
width: 400px;
height: 500px;
border: 5px solid rgb(0, 255, 8);
background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
background-size: 100px;
background-repeat: no-repeat;
background-position: top 50px left 10px;
/* margin-top 50px and margin-left 10px, on the "background-position": top left; */
}
</style>
- Output:
No comments:
Post a Comment