CSS Background Size
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
Set background size with pixels:
#div1
{
background-image: url(img_flower.jpg);
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
}
Try it Yourself »
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
Set background size with contain, cover and auto:
#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;
}
Try it Yourself »
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;
}
Try it Yourself »
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;
}
Try it Yourself »
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;
}
Try it Yourself »
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) |
