Loading lesson path
Formula
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 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.
#div1
{
background-image: url(img_flower.jpg);
background-position: right top;
background-repeat: no-repeat;
background-size: 100px 80px;
}Formula
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).
Set background size with contain, cover and auto:
#div1 {
border: 1px solid black;Formula
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;
}Formula
(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:#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;Formula
background - size:contain, 150px, auto;
}Now we want to have a background image that covers the entire browser window at all times.
Fill the entire page with the image (no white space)
Formula
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.
Formula
Then adjust its size with the background - size property:Example html {
background: url(img_man.jpg) no-repeat center fixed;
background-size: cover;
}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;
}Formula
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