CSS background-size property
The background-size property in CSS is used to control the size of a background image within an element. This property allows you to scale or resize a background image to fit the container in a variety of ways, which is essential for responsive web design and creating visually appealing layouts.
Basic Usage
The basic syntax for the background-size property is:
selector {
background-size: value;
}
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 200px;
background-image: url('example.jpg');
background-size: cover;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
In this example, the background image example.jpg will cover the entire div, scaling to fit without stretching the image disproportionately.
Values for background-size
1. auto
- Description: The background image retains its original size.
- Use Case: This is the default value and is used when you don't want to scale the image.
div {
background-size: auto;
}
2. cover
- Description: The background image scales to cover the entire element. The image maintains its aspect ratio, which may result in some parts of the image being clipped if the container's aspect ratio differs from the image's.
- Use Case: Ideal for creating full-screen backgrounds or ensuring that the background covers the entire area of the element without leaving any gaps.
div {
background-size: cover;
}
3. contain
- Description: The background image scales to fit within the element while maintaining its aspect ratio. The entire image is visible, but there may be empty space if the aspect ratios don't match.
- Use Case: Useful when you want the entire image to be visible without cropping.
div {
background-size: contain;
}
4. Length Values (e.g., px, em, etc.)
- Description: You can specify the width and height of the background image using specific length values.
- Use Case: Provides precise control over the background image's dimensions.
div {
background-size: 100px 50px;
}
- If only one value is specified, the other dimension is set to
auto:
div {
background-size: 100px; /* Width is 100px, height is auto */
}
5. Percentage Values
- Description: You can specify the size of the background image as a percentage of the element's dimensions.
- Use Case: Useful for responsive designs, where the background image scales relative to the element's size.
div {
background-size: 50% 100%;
}
- If only one percentage is specified, the other dimension is set to
auto:
div {
background-size: 50%; /* Width is 50% of the element's width, height is auto */
}
6. cover vs contain
cover: Ensures that the background image covers the entire area, even if it means cropping parts of the image.contain: Ensures that the entire background image is visible, even if it leaves some space around the image.
Example Comparison
<div style="background-image: url('example.jpg'); background-size: cover;"></div>
<div style="background-image: url('example.jpg'); background-size: contain;"></div>
In the first div, the image will fill the entire container, possibly cropping some parts. In the second div, the entire image will be visible, but there may be space around the edges.
Practical Examples
Full-Width Responsive Header
header {
background-image: url('banner.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
This setup is common for creating full-width headers where the background image scales to cover the entire width of the header, regardless of screen size.
Tiling Background with Fixed Size
section {
background-image: url('tile.png');
background-size: 50px 50px;
background-repeat: repeat;
}
Here, the background image will tile at a fixed size of 50x50 pixels, creating a repeating pattern.
Maintaining Aspect Ratio with Contain
div {
background-image: url('logo.png');
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
In this example, the logo image will scale to fit within the div while maintaining its aspect ratio, ensuring that the entire logo is visible.
Combining background-size with Other Background Properties
background-position: Controls where the image is placed within the element.background-repeat: Determines whether the image is repeated.background-attachment: Controls whether the background scrolls with the page or remains fixed.
Example: Combining background-size and background-position
div {
background-image: url('image.jpg');
background-size: 100% 100%;
background-position: top left;
}
In this example, the image is stretched to cover 100% of the width and height of the div, and it starts from the top-left corner.