The CSS background-size Property
The background-size property allows you to specify the size of background images.
The background size can be specified in lengths, percentages, or by using one of the keywords: auto , contain , or cover .
The following example resizes a background image to much smaller than the original image (using pixels):
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Example
#div1 {
background-image: url(img_flower.jpg);
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
}Live preview
background-size - auto, contain and cover
The keyword values for background-size are auto , contain and cover .
The auto value is the default value, and displays the background image in its original size.
The contain value scales the image up or down, to fit inside the content area.
The cover value scales the image to be as large as possible so that the content area is completely covered by the background image (its width and height will be equal to, or larger than the content area).
Example
#div1 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: contain;
}
#div2 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: cover;
}
#div3 {
border: 1px solid black;
background-image: url(img_flwr.gif);
background-repeat: no-repeat;
background-size: auto;
}Live preview
Define Sizes of Multiple Background Images
The background-size property also accepts multiple values (using a comma-separated list), when working with multiple backgrounds.
The following example has three background images specified, with different background-size value for each image:
Example
#div1 {
background-image: url(img_tree.gif), url(img_flwr.gif), url(paper.gif);
background-position: left top, right
bottom, left top;
background-repeat: no-repeat, no-repeat, repeat;
background-size: contain, 150px, auto;
}Live preview
CSS Full Size Background Image
Now we want to have a background image that covers the entire browser window at all times.
The requirements are as follows
- Fill the entire page with the image (no white space)
- Scale image as needed
- Center image on page
- Do not cause scrollbars
Here, we define the styles in the <html> element (the <html> element is always at least the height of the browser window). Then we set a fixed and centered background on it. Then adjust its size with the background-size property:
Example
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}Live preview
CSS Hero Image
You could also use different background properties on a <div> to create a hero image (a large image with text), and place it where you want.
Example
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}Live preview
CSS Advanced Background Properties
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |