CSSBackground Size
The CSS background-size Property
Thebackground-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, orcover.
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:
background-image: url(img_flower.jpg);
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
}
background-size - auto, contain and cover
The keyword values forbackground-size areauto,contain andcover.
Theauto value is the default value, and displays the background image in its original size.
Thecontain value scales the image up or down, to fit inside the content area.
Thecover 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:
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;
}
Define Sizes of Multiple Background Images
Thebackground-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
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;
}
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
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}
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
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position: relative;
}
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) |
