Background

A collection of utility classes to add different backgrounds to elements.

Usage

To apply a background color to an element, add one of the following classes. The actual color for each modifier is defined by the UIkit style that you have chosen or customized.

ClassDescription
.uk-background-defaultApplies the default background color.
.uk-background-mutedApplies a muted background color.
.uk-background-primaryApplies the primary background color.
.uk-background-secondaryApplies a secondary background color.
<div class="uk-background-primary"></div>

Note To adapt your content for better visibility on each background, add the helper classes like text-*-foreground. Use the Padding component to add some padding to the elements.

Copy to clipboard
  • Default

    Muted

    Primary

    Secondary

  • <div class="uk-child-width-1-2@s uk-text-center" uk-grid>
      <div>
        <div class="uk-padding uk-background-default uk-panel">
          <p class="uk-h4">Default</p>
        </div>
      </div>
      <div>
        <div class="uk-padding uk-background-muted uk-panel text-muted-foreground">
          <p class="uk-h4">Muted</p>
        </div>
      </div>
      <div>
        <div
          class="uk-padding uk-background-primary uk-panel text-primary-foreground"
        >
          <p class="uk-h4">Primary</p>
        </div>
      </div>
      <div>
        <div
          class="uk-padding uk-background-secondary uk-panel text-secondary-foreground"
        >
          <p class="uk-h4">Secondary</p>
        </div>
      </div>
    </div>

Size modifiers

This component features classes to specify the size of background images by keeping its intrinsic ratio.

ClassDescription
.uk-background-coverScales the background image to completely cover the containing area.
.uk-background-containScales the background image as far as its width and height can fit inside the containing area.
.uk-background-width-1-1Scales the background image to fill 100% of the available width.
.uk-background-height-1-1Scales the background image to fill 100% of the available height.

Note When using these classes, the background position automatically shifts to the middle and background-repeat is set to no-repeat.

<div class="uk-background-cover"></div>
Copy to clipboard
  • Cover

    Contain

  • <div class="uk-child-width-1-2@s" uk-grid>
      <div>
        <div
          class="uk-background-cover uk-flex uk-flex-center uk-flex-middle uk-height-medium uk-panel"
          style="background-image: url(/images/dark.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Cover</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-muted uk-background-contain uk-flex uk-flex-center uk-flex-middle uk-height-medium uk-panel"
          style="background-image: url(/images/dark.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Contain</p>
        </div>
      </div>
    </div>

Position modifiers

To alter the background position of your image — which is in the top left-hand corner of the area by default, add one of the following classes.

ClassDescription
.uk-background-top-leftThe initial position of the image is in the top left hand corner.
.uk-background-top-centerThe initial position of the image is at the top.
.uk-background-top-rightThe initial position of the image is in the top right hand corner.
.uk-background-center-leftThe initial position of the image is on the left.
.uk-background-center-centerThe initial position of the image is in the middle.
.uk-background-center-rightThe initial position of the image is on the right.
.uk-background-bottom-leftThe initial position of the image is in the bottom left hand corner.
.uk-background-bottom-centerThe initial position of the image is at the bottom.
.uk-background-bottom-rightThe initial position of the image is in the bottom right hand corner.
<div class="uk-background-top-left"></div>
Copy to clipboard
  • Top Right

    Top Left

  • <div class="uk-child-width-1-2@s" uk-grid>
      <div>
        <div
          class="uk-background-cover uk-background-top-right uk-flex uk-flex-center uk-flex-middle uk-height-medium uk-panel"
          style="background-image: url(/images/dark.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Top Right</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-cover uk-background-top-left uk-flex uk-flex-center uk-flex-middle uk-height-medium uk-panel"
          style="background-image: url(/images/dark.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Top Left</p>
        </div>
      </div>
    </div>

No repeat

To keep smaller images from repeating to fill the background area, add the .uk-background-norepeat class.

<div class="uk-background-norepeat"></div>

Attachment

You can also apply a fixed background attachment, so that the image remains in its position while scrolling the site.

<div class="uk-background-fixed"></div>
Copy to clipboard
  • <div
      class="uk-background-center-center uk-background-fixed uk-height-medium uk-width-large"
      style="background-image: url(/images/dark.jpg)"
    ></div>

Responsive

Add one of the following classes to limit the display of background images to certain viewport sizes. This is great in cases where the image and content overlap on a phone screen in a way that would make text illegible.

ClassDescription
.uk-background-image@sDisplays the background image on device widths of 640px and larger.
.uk-background-image@mDisplays the background image on device widths of 768px and larger.
.uk-background-image@lDisplays the background image on device widths of 1024px and larger.
.uk-background-image@xlDisplays the background image on device widths of 1280px and larger.
<div class="uk-background-image@m"></div>

Resize your browser window to see the effect in the example below.

Copy to clipboard
  • Image shown

    Image not shown

  • <div
      class="uk-background-image@m uk-background-muted uk-background-cover uk-flex uk-flex-center uk-flex-middle uk-height-medium uk-width-large"
      style="background-image: url(/images/dark.jpg)"
    >
      <p class="uk-visible@m uk-h4 uk-margin-remove text-muted-foreground">
        Image shown
      </p>
      <p class="uk-hidden@m uk-h4 uk-margin-remove text-muted-foreground">
        Image not shown
      </p>
    </div>

Blend modes

Add one of the following classes to apply different blend modes to your background image. You can combine these with the background color classes, as well. For a better understanding of how background blend modes work, take a look at this CSS Tricks article.

ClassDescription
.uk-background-blend-multiplyThis class sets the blend mode to multiply.
.uk-background-blend-screenThis class sets the blend mode to screen.
.uk-background-blend-overlayThis class sets the blend mode to overlay.
.uk-background-blend-darkenThis class sets the blend mode to darken.
.uk-background-blend-lightenThis class sets the blend mode to lighten.
.uk-background-blend-color-dodgeThis class sets the blend mode to color dodge.
.uk-background-blend-color-burnThis class sets the blend mode to color burn.
.uk-background-blend-hard-lightThis class sets the blend mode to hard light.
.uk-background-blend-soft-lightThis class sets the blend mode to soft light.
.uk-background-blend-differenceThis class sets the blend mode to difference.
.uk-background-blend-exclusionThis class sets the blend mode to exclusion.
.uk-background-blend-hueThis class sets the blend mode to hue.
.uk-background-blend-saturationThis class sets the blend mode to saturation.
.uk-background-blend-colorThis class sets the blend mode to color.
.uk-background-blend-luminosityThis class sets the blend mode to luminosity.
<div class="uk-background-primary uk-background-blend-multiply"></div>
Copy to clipboard
  • Multiply

    Screen

    Overlay

    Darken

    Lighten

    Color Dodge

    Color Burn

    Hard Light

    Soft Light

    Difference

    Exclusion

    Hue

    Saturation

    Color

    Luminosity

  • <div class="uk-child-width-1-3@s uk-grid-small uk-child-width-1-2" uk-grid>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-multiply uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Multiply</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-screen uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Screen</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-overlay uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Overlay</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-darken uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Darken</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-lighten uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Lighten</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-color-dodge uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Color Dodge</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-color-burn uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Color Burn</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-hard-light uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Hard Light</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-soft-light uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Soft Light</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-difference uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Difference</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-exclusion uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Exclusion</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-hue uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Hue</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-saturation uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Saturation</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-color uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Color</p>
        </div>
      </div>
      <div>
        <div
          class="uk-background-primary uk-background-cover uk-background-blend-luminosity uk-flex uk-flex-center uk-flex-middle uk-height-small uk-panel"
          style="background-image: url(/images/photo.jpg)"
        >
          <p class="uk-h4 text-muted-foreground">Luminosity</p>
        </div>
      </div>
    </div>

Theme development

On your tailwind.config.js file, add the Background component within the ui() plugin.

import ui from "franken-ui";

ui({
    components: {
        background: {
            hooks: {},
            media: true
        }
    }
}),

Available hooks

Note If you are developing theme from scratch, you can use all these hooks. If you’re using the shadcn/ui theme, some hooks might not work as they were already in use or removed. Learn more about using hooks.

Hook NameAffected Classes
hook-misc*