- The background-size property in CSS is used to specify the size of a background image in relation to its container. It determines how the image should be scaled, stretched, or cropped to fit within the available space.
The background-size property accepts several values:
- auto: The default value. The background image is displayed at its original size.
- cover: The background image is scaled proportionally to cover the entire container, while maintaining its aspect ratio. This may result in some parts of the image being cropped if it doesn't perfectly fit the container's dimensions.
- contain: The background image is scaled proportionally to fit within the container, while maintaining its aspect ratio. This ensures that the entire image is visible, but there may be empty space within the container if the image doesn't perfectly fill it.
- Length values: You can specify the width and height of the background image using length values such as pixels (px), percentages (%), or other valid CSS length units. For example, background-size: 200px 100px; will set the background image's width to 200 pixels and height to 100 pixels.
- Percentage values: You can use percentage values to scale the background image relative to the container's dimensions. For example, background-size: 50% 75%; will set the background image's width to 50% of the container's width and height to 75% of the container's height.
- Multiple values: You can also provide two values separated by a space to specify the width and height independently. For example, background-size: 300px auto; will set the background image's width to 300 pixels and height will be automatically adjusted based on the image's aspect ratio.
- Program 01:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
width: 300px;
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: contain;
/* It is use to fit the image to the container */
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
- Output:
- Program 02:
<style>
.container {
width: 300px;
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: cover; /* completely cover the conntainer */
}
</style>
- Output:
- Program 03:
<style>
.container {
width: 300px;
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: 40%;
background-repeat: no-repeat;
}
</style>
- Output:
- Program 04:
<style>
.container {
width: 300px;
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: 140px 180px;
}
</style>
- Output:
No comments:
Post a Comment