Background Size, Step 2

Two more values for the background-size property are contain and cover.

The contain value works like this:

• The image proportions are preserved.
• The image is stretched to the maximum possible size so that it completely fills in the background boundaries in both width and height.
• The image may not cover the entire background area of the block if the proportions of the image and the block are different.

The cover value works differently:

• The image proportions are preserved;
• The image is assigned the minimum possible dimensions that will allow it to cover the entire background area of the block;
• if the dimensions of the image and the block are different, then part of the image is cropped.

Let’s try out these values in practice.