🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →


Progress value is 30%


Background utility classes.

🔍 On this page:

  1. Background color
  2. Background opacity
  3. Background size
  4. Background repeat
  5. Background position
  6. Background gradients

Background color #

Edit the background color of an element.

Background #

Class Description
.bg-darker background-color: var(--color-bg-darker);
.bg-dark background-color: var(--color-bg-dark);
.bg background-color: var(--color-bg);
.bg-light background-color: var(--color-bg-light);
.bg-lighter background-color: var(--color-bg-lighter);

Background contrast scale #

Class Description
.bg-contrast-lower background-color: var(--color-contrast-lower);
.bg-contrast-low background-color: var(--color-contrast-low);
.bg-contrast-medium background-color: var(--color-contrast-medium);
.bg-contrast-high background-color: var(--color-contrast-high);
.bg-contrast-higher background-color: var(--color-contrast-higher);

Background primary #

Class Description
.bg-primary-darker background-color: var(--color-primary-darker);
.bg-primary-dark background-color: var(--color-primary-dark);
.bg-primary background-color: var(--color-primary);
.bg-primary-light background-color: var(--color-primary-light);
.bg-primary-lighter background-color: var(--color-primary-lighter);

Background accent #

Class Description
.bg-accent-darker background-color: var(--color-accent-darker);
.bg-accent-dark background-color: var(--color-accent-dark);
.bg-accent background-color: var(--color-accent);
.bg-accent-light background-color: var(--color-accent-light);
.bg-accent-lighter background-color: var(--color-accent-lighter);

Background feedback #

Class Description
.bg-success-darker background-color: var(--color-success-darker);
.bg-success-dark background-color: var(--color-success-dark);
.bg-success background-color: var(--color-success);
.bg-success-light background-color: var(--color-success-light);
.bg-success-lighter background-color: var(--color-success-lighter);
.bg-warning-darker background-color: var(--color-warning-darker);
.bg-warning-dark background-color: var(--color-warning-dark);
.bg-warning background-color: var(--color-warning);
.bg-warning-light background-color: var(--color-warning-light);
.bg-warning-lighter background-color: var(--color-warning-lighter);
.bg-error-darker background-color: var(--color-error-darker);
.bg-error-dark background-color: var(--color-error-dark);
.bg-error background-color: var(--color-error);
.bg-error-light background-color: var(--color-error-light);
.bg-error-lighter background-color: var(--color-error-lighter);

Black & White #

Class Description
.bg-white background-color: var(--color-white, white);
.bg-black background-color: var(--color-black, black);

Misc #

Class Description
.bg-transparent background-color: transparent;
.bg-inherit background-color: inherit;

Background opacity #

If you use a background color utility class, you can modify the background opacity using one of the following classes:

Class Description
.bg-opacity-0 background opacity 0%
.bg-opacity-10% background opacity 10%
.bg-opacity-20% background opacity 20%
.bg-opacity-30% background opacity 30%
.bg-opacity-40% background opacity 40%
.bg-opacity-50% background opacity 50%
.bg-opacity-60% background opacity 60%
.bg-opacity-70% background opacity 70%
.bg-opacity-80% background opacity 80%
.bg-opacity-90% background opacity 90%

Usage example:

<div class="bg-primary bg-opacity-50%"> <!-- content --> </div> 

How to create custom background opacity classes:

.bg-opacity-075\% {
  --bg-o: 0.075;

.bg-opacity-15\% {
  --bg-o: 0.15;

Background size #

Background-size utility classes:

Class Description
.bg-cover background-size: cover;

Example - How to add a background image to a section:

<div class="bg-cover background-center" style="background-image: url('/assets/img/photo.jpg');">
  <!-- ... -->

Background repeat #

Background-repeat utility classes:

Class Description
.bg-no-repeat background-repeat: no-repeat;

Background position #

Background-position utility classes:

Class Description
.bg-top background-position: center top;
.bg-right background-position: right center;
.bg-bottom background-position: center bottom;
.bg-left background-position: left center;
.bg-top-left background-position: left top;
.bg-top-right background-position: right top;
.bg-bottom-left background-position: left bottom;
.bg-bottom-right background-position: right bottom;

Example - How to add a background image to a section:

<div class="bg-cover background-center" style="background-image: url('/assets/img/photo.jpg');">
  <!-- ... -->

Background gradients #

If you've created one or more gradients using the Color Editor, the tool will generate a collection of background utility classes based on the gradient's name.

For example, if you create a --gradient-primary color, you'll get the following classes:

Class Description
.bg-gradient-primary radial gradient
.bg-gradient-primary-top linear gradient to top
.bg-gradient-primary-right linear gradient to right
.bg-gradient-primary-bottom linear gradient to bottom
.bg-gradient-primary-left linear gradient to left
<div class="bg-gradient-primary-bottom">
  <!-- ... -->

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.