Elements logo

Background size

Utilities for controlling the background size of an element's background image

Class reference

ClassProperties
bg-0background-size: 0;
bg-1background-size: 0.25rem;
bg-2background-size: 0.5rem;
bg-3background-size: 0.75rem;
bg-4background-size: 1rem;
bg-5background-size: 1.25rem;
bg-6background-size: 1.5rem;
bg-7background-size: 1.75rem;
bg-8background-size: 2rem;
bg-9background-size: 2.25rem;
bg-10background-size: 2.5rem;
bg-11background-size: 2.75rem;
bg-12background-size: 3rem;
bg-13background-size: 3.25rem;
bg-14background-size: 3.5rem;
bg-15background-size: 3.75rem;
bg-16background-size: 4rem;
bg-18background-size: 4.5rem;
bg-20background-size: 5rem;
bg-24background-size: 6rem;
bg-28background-size: 7rem;
bg-32background-size: 8rem;
bg-36background-size: 9rem;
bg-40background-size: 10rem;
bg-48background-size: 12rem;
bg-56background-size: 14rem;
bg-60background-size: 15rem;
bg-64background-size: 16rem;
bg-72background-size: 18rem;
bg-80background-size: 20rem;
bg-96background-size: 24rem;
bg-autobackground-size: auto;
bg-coverbackground-size: cover;
bg-containbackground-size: contain;
bg-25%background-size: 25%;
bg-50%background-size: 50%;
bg-75%background-size: 75%;
bg-100%background-size: 100%;
bg-150%background-size: 150%;
bg-200%background-size: 200%;
bg-300%background-size: 300%;
bg-1000%background-size: 1000%;
bg-pxbackground-size: 1px;
bg-0.5background-size: 0.125rem;
bg-1.5background-size: 0.375rem;
bg-2.5background-size: 0.625rem;
bg-3.5background-size: 0.875rem;
bg-4.5background-size: 1.125rem;

Auto

Use .bg-auto to display the background image at its default size.

<div class="bg-auto bg-center ..." style="background-image: url(...)"></div>

Cover

Use .bg-cover to scale the background image until it fills the background layer.

<div class="bg-cover bg-center ..." style="background-image: url(...)"></div>

Contain

Use .bg-contain to scale the background image to the outer edges without cropping or stretching.

<div class="bg-contain bg-center ..." style="background-image: url(...)"></div>

Responsive

To control the size of an element’s background image at a specific breakpoint, add a {screen}: prefix to any existing background size utility. For example, adding the class md:bg-contain to an element would apply the bg-contain utility at medium screen sizes and above.

<div class="bg-auto md:bg-contain ..."></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.