0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>Two more values for the background-size property are contain and cover.</p>
1
<p>Two more values for the background-size property are contain and cover.</p>
2
<p>The contain value works like this:</p>
2
<p>The contain value works like this:</p>
3
<ul><li>The image proportions are preserved.</li>
3
<ul><li>The image proportions are preserved.</li>
4
<li>The image is stretched to the maximum possible size so that it completely fills in the background boundaries in both width and height.</li>
4
<li>The image is stretched to the maximum possible size so that it completely fills in the background boundaries in both width and height.</li>
5
<li>The image may not cover the entire background area of the block if the proportions of the image and the block are different.</li>
5
<li>The image may not cover the entire background area of the block if the proportions of the image and the block are different.</li>
6
</ul><p>The cover value works differently:</p>
6
</ul><p>The cover value works differently:</p>
7
<ul><li>The image proportions are preserved;</li>
7
<ul><li>The image proportions are preserved;</li>
8
<li>The image is assigned the minimum possible dimensions that will allow it to cover the entire background area of the block;</li>
8
<li>The image is assigned the minimum possible dimensions that will allow it to cover the entire background area of the block;</li>
9
<li>if the dimensions of the image and the block are different, then part of the image is cropped.</li>
9
<li>if the dimensions of the image and the block are different, then part of the image is cropped.</li>
10
</ul><p>Let’s try out these values in practice.</p>
10
</ul><p>Let’s try out these values in practice.</p>