Background

Background Utilities

Canvas provides theme background colors, the contrast scale, background sizing helpers, and gradients.

Theme and base colors

Class	Background
`.bg-color`	The site theme color (uses `--cnvs-themecolor`)
`.bg-primary`	Primary
`.bg-primary-subtle`	Subtle primary tint
`.bg-light`	Light
`.bg-dark`	Dark
`.bg-body`	Page body background
`.bg-white`	White
`.bg-transparent`	Transparent

Bootstrap semantic backgrounds also apply: .bg-success, .bg-danger, .bg-warning, .bg-info, .bg-secondary.

Contrast backgrounds

The full contrast scale is available as backgrounds and adapts to dark mode:

.bg-contrast-0, .bg-contrast-100, .bg-contrast-200, ... .bg-contrast-900, .bg-contrast-1000.

Background sizing and position

Class	Effect
`.bg-cover`	`background-size: cover`
`.bg-contain`	`background-size: contain`
`.bg-center`	`background-position: center`

Opacity

Background opacity respects --bs-bg-opacity, so you can pair a color with Bootstrap opacity utilities.

Usage

Theme colored panel:

<div class="bg-color text-white p-5 rounded-3">
  Uses the current site theme color.
</div>

Cover image hero:

<section class="bg-cover bg-center min-vh-100"
         style="background-image: url('images/hero.jpg');">
  <div class="container py-6">...</div>
</section>

Adaptive neutral card:

<div class="bg-contrast-100 p-4">Neutral surface, flips in dark mode.</div>

Classes

Class	Description
`.bg-color`	Applies the Current Theme Color (set in the css/colors.css\|php File) as a Background Color on an Element. Hover Use `.h-bg-color` to apply this Background Color on Hover
`.bg-primary`	Applies the Bootstrap Primary Color as a Background Color on an Element. Hover Use `.h-bg-primary` to apply this Background Color on Hover
`.bg-secondary`	Applies the Bootstrap Secondary Color as a Background Color on an Element. Hover Use `.h-bg-secondary` to apply this Background Color on Hover
`.bg-success`	Applies the Bootstrap Success Color as a Background Color on an Element. Hover Use `.h-bg-success` to apply this Background Color on Hover
`.bg-danger`	Applies the Bootstrap Danger Color as a Background Color on an Element. Hover Use `.h-bg-danger` to apply this Background Color on Hover
`.bg-warning`	Applies the Bootstrap Warning Color as a Background Color on an Element. Hover Use `.h-bg-warning` to apply this Background Color on Hover
`.bg-info`	Applies the Bootstrap Info Color as a Background Color on an Element. Hover Use `.h-bg-info` to apply this Background Color on Hover
`.bg-light`	Applies the Bootstrap Light Color as a Background Color on an Element. Hover Use `.h-bg-light` to apply this Background Color on Hover
`.bg-dark`	Applies the Bootstrap Dark Color as a Background Color on an Element. Hover Use `.h-bg-dark` to apply this Background Color on Hover
`.bg-transparent`	Sets the `background-color` CSS property to transparent
`.bg-ts`	Applies Background Color Transitions on the Element Example: [ch_pre] ... [/ch_pre]
`.bg-clip`	Applies a Clip Effect of 1rem/16px on the Background CSS of the Element. Sizes `.bg-clip-sm` - Clip Effect Size of 0.5rem/8px `.bg-clip-lg` - Clip Effect Size of 2rem/32px Example: [ch_pre] ... [/ch_pre]

Was this page helpful?