Background size

Syntax

Class
Properties
bg-cover
background-size: cover;
bg-contain
background-size: contain;
bg-size-auto
background-size: auto;
bg-size-{width}-{height}
background-size: {width} {height};

Parameters

width
<length-percentage unsigned default-unit=1px>
height
<length-percentage unsigned default-unit=1px>
<div class="t1 w-256 h-256 bg-c-white bg-no-repeat bg-center bg-contain shadow-4" style="background-image: url(/assets/tree.jpg?o1-cache=1);"></div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Cover the element by the background image.
t1 bg-cover
.t1.bg-cover { background-size: cover; }
The element shall contain the entire background image.
t1 bg-cover
.t1.bg-cover { background-size: cover; }
Show the background image at its intrinsic size.
t1 bg-size-auto
.t1.bg-size-auto { background-size: auto; }
Show the background image at width and height values provided as unitless numbers.
t1 bg-size-10-20
.t1.bg-size-10-20 { background-size: 10px 20px; }
Show the background image at width and height values provided in pixel units.
t1 bg-size-10px-20px
.t1.bg-size-10px-20px { background-size: 10px 20px; }
Show the background image at width and height values provided in percentages.
t1 bg-size-50%-100%
.t1.bg-size-50\%-100\% { background-size: 50% 100%; }
Show the background image at given size where the width is defined as `auto`.
t1 bg-size-auto-100
.t1.bg-size-auto-100 { background-size: auto 100px; }
Show the background image at given size where the height is defined as `auto`.
t1 bg-size-50-auto
.t1.bg-size-50-auto { background-size: 50px auto; }