Background
Background utility classes.
Background color #
Edit the background color of an element.
Background #
| CSS Class | Description |
|---|---|
b{p}g-darker |
background-color: var(--color-bg-darker); |
b{p}g-dark |
background-color: var(--color-bg-dark); |
b{p}g |
background-color: var(--color-bg); |
b{p}g-light |
background-color: var(--color-bg-light); |
b{p}g-lighter |
background-color: var(--color-bg-lighter); |
Background contrast scale #
| CSS Class | Description |
|---|---|
b{p}g-contrast-lower |
background-color: var(--color-contrast-lower); |
b{p}g-contrast-low |
background-color: var(--color-contrast-low); |
b{p}g-contrast-medium |
background-color: var(--color-contrast-medium); |
b{p}g-contrast-high |
background-color: var(--color-contrast-high); |
b{p}g-contrast-higher |
background-color: var(--color-contrast-higher); |
Background primary #
| CSS Class | Description |
|---|---|
b{p}g-primary-darker |
background-color: var(--color-primary-darker); |
b{p}g-primary-dark |
background-color: var(--color-primary-dark); |
b{p}g-primary |
background-color: var(--color-primary); |
b{p}g-primary-light |
background-color: var(--color-primary-light); |
b{p}g-primary-lighter |
background-color: var(--color-primary-lighter); |
Background accent #
| CSS Class | Description |
|---|---|
b{p}g-accent-darker |
background-color: var(--color-accent-darker); |
b{p}g-accent-dark |
background-color: var(--color-accent-dark); |
b{p}g-accent |
background-color: var(--color-accent); |
b{p}g-accent-light |
background-color: var(--color-accent-light); |
b{p}g-accent-lighter |
background-color: var(--color-accent-lighter); |
Background feedback #
| CSS Class | Description |
|---|---|
b{p}g-success-darker |
background-color: var(--color-success-darker); |
b{p}g-success-dark |
background-color: var(--color-success-dark); |
b{p}g-success |
background-color: var(--color-success); |
b{p}g-success-light |
background-color: var(--color-success-light); |
b{p}g-success-lighter |
background-color: var(--color-success-lighter); |
b{p}g-warning-darker |
background-color: var(--color-warning-darker); |
b{p}g-warning-dark |
background-color: var(--color-warning-dark); |
b{p}g-warning |
background-color: var(--color-warning); |
b{p}g-warning-light |
background-color: var(--color-warning-light); |
b{p}g-warning-lighter |
background-color: var(--color-warning-lighter); |
b{p}g-error-darker |
background-color: var(--color-error-darker); |
b{p}g-error-dark |
background-color: var(--color-error-dark); |
b{p}g-error |
background-color: var(--color-error); |
b{p}g-error-light |
background-color: var(--color-error-light); |
b{p}g-error-lighter |
background-color: var(--color-error-lighter); |
Black & white #
| CSS Class | Description |
|---|---|
b{p}g-white |
background-color: var(--color-white); |
b{p}g-black |
background-color: var(--color-black); |
Misc #
| CSS Class | Description |
|---|---|
b{p}g-transparent |
background-color: transparent; |
b{p}g-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:
| CSS Class | Description |
|---|---|
b{p}g-opacity-0 |
background opacity 0% |
b{p}g-opacity-5% |
background opacity 5% |
b{p}g-opacity-10% |
background opacity 10% |
b{p}g-opacity-15% |
background opacity 15% |
b{p}g-opacity-20% |
background opacity 20% |
b{p}g-opacity-25% |
background opacity 25% |
b{p}g-opacity-30% |
background opacity 30% |
b{p}g-opacity-40% |
background opacity 40% |
b{p}g-opacity-50% |
background opacity 50% |
b{p}g-opacity-60% |
background opacity 60% |
b{p}g-opacity-70% |
background opacity 70% |
b{p}g-opacity-75% |
background opacity 75% |
b{p}g-opacity-80% |
background opacity 80% |
b{p}g-opacity-85% |
background opacity 85% |
b{p}g-opacity-90% |
background opacity 90% |
b{p}g-opacity-95% |
background opacity 95% |
Usage example:
<div class="bg-primary bg-opacity-50%"> <!-- content --> </div> Background size #
Background-size utility classes:
| CSS Class | Description |
|---|---|
b{p}g-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');">
<!-- ... -->
</div>Background repeat #
Background-repeat utility classes:
| CSS Class | Description |
|---|---|
b{p}g-no-repeat |
background-repeat: no-repeat; |
Background position #
Background-position utility classes:
| CSS Class | Description |
|---|---|
b{p}g-top |
background-position: center top; |
b{p}g-right |
background-position: right center; |
b{p}g-bottom |
background-position: center bottom; |
b{p}g-left |
background-position: left center; |
b{p}g-top-left |
background-position: left top; |
b{p}g-top-right |
background-position: right top; |
b{p}g-bottom-left |
background-position: left bottom; |
b{p}g-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');">
<!-- ... -->
</div>Background gradients #
If you've added a gradient to your color palette (e.g., gradient 'primary'), you can use the following classes:
| CSS Class | Description |
|---|---|
b{p}g-gradient-primary |
radial gradient |
b{p}g-gradient-primary-top-left |
linear gradient to top-left |
b{p}g-gradient-primary-top |
linear gradient to top |
b{p}g-gradient-primary-top-right |
linear gradient to top-right |
b{p}g-gradient-primary-right |
linear gradient to right |
b{p}g-gradient-primary-bottom-right |
linear gradient to bottom-right |
b{p}g-gradient-primary-bottom |
linear gradient to bottom |
b{p}g-gradient-primary-bottom-left |
linear gradient to bottom-left |
b{p}g-gradient-primary-left |
linear gradient to left |
<div class="bg-gradient-primary-bottom">
<!-- ... -->
</div>
