keyword scales the background image to be as large as possible (but both its width and its height must fit inside the content area). As such, depending on the proportions of the background image and the background positioning area, there may be some areas of the background which are not covered by the background image.
The
cover keyword scales the background image so that the content area is completely covered by the background image (both its width and height are equal to or exceed the content area). As such, some parts of the background image may not be visible in the background positioning area.
The following example illustrates the use of
contain and cover:Example
#div1 {
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;}
#div2 {
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;}
The background-size Property
background-size: contain:
Lorem ipsum dolor sit amet.
background-size: cover:
Lorem ipsum dolor sit amet.
No background-size defined:
Lorem ipsum dolor sit amet.
Original image:
