A collection of utility classes to add different backgrounds to elements.
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.
| Class | Description |
|---|---|
.uk-background-default | Applies the default background color. |
.uk-background-muted | Applies a muted background color. |
.uk-background-primary | Applies the primary background color. |
.uk-background-secondary | Applies 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.
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>This component features classes to specify the size of background images by keeping its intrinsic ratio.
| Class | Description |
|---|---|
.uk-background-cover | Scales the background image to completely cover the containing area. |
.uk-background-contain | Scales the background image as far as its width and height can fit inside the containing area. |
.uk-background-width-1-1 | Scales the background image to fill 100% of the available width. |
.uk-background-height-1-1 | Scales 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>
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>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.
| Class | Description |
|---|---|
.uk-background-top-left | The initial position of the image is in the top left hand corner. |
.uk-background-top-center | The initial position of the image is at the top. |
.uk-background-top-right | The initial position of the image is in the top right hand corner. |
.uk-background-center-left | The initial position of the image is on the left. |
.uk-background-center-center | The initial position of the image is in the middle. |
.uk-background-center-right | The initial position of the image is on the right. |
.uk-background-bottom-left | The initial position of the image is in the bottom left hand corner. |
.uk-background-bottom-center | The initial position of the image is at the bottom. |
.uk-background-bottom-right | The initial position of the image is in the bottom right hand corner. |
<div class="uk-background-top-left"></div>
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>To keep smaller images from repeating to fill the background area, add the .uk-background-norepeat class.
<div class="uk-background-norepeat"></div>
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>
<div
class="uk-background-center-center uk-background-fixed uk-height-medium uk-width-large"
style="background-image: url(/images/dark.jpg)"
></div>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.
| Class | Description |
|---|---|
.uk-background-image@s | Displays the background image on device widths of 640px and larger. |
.uk-background-image@m | Displays the background image on device widths of 768px and larger. |
.uk-background-image@l | Displays the background image on device widths of 1024px and larger. |
.uk-background-image@xl | Displays 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.
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>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.
| Class | Description |
|---|---|
.uk-background-blend-multiply | This class sets the blend mode to multiply. |
.uk-background-blend-screen | This class sets the blend mode to screen. |
.uk-background-blend-overlay | This class sets the blend mode to overlay. |
.uk-background-blend-darken | This class sets the blend mode to darken. |
.uk-background-blend-lighten | This class sets the blend mode to lighten. |
.uk-background-blend-color-dodge | This class sets the blend mode to color dodge. |
.uk-background-blend-color-burn | This class sets the blend mode to color burn. |
.uk-background-blend-hard-light | This class sets the blend mode to hard light. |
.uk-background-blend-soft-light | This class sets the blend mode to soft light. |
.uk-background-blend-difference | This class sets the blend mode to difference. |
.uk-background-blend-exclusion | This class sets the blend mode to exclusion. |
.uk-background-blend-hue | This class sets the blend mode to hue. |
.uk-background-blend-saturation | This class sets the blend mode to saturation. |
.uk-background-blend-color | This class sets the blend mode to color. |
.uk-background-blend-luminosity | This class sets the blend mode to luminosity. |
<div class="uk-background-primary uk-background-blend-multiply"></div>
Multiply
Screen
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>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
}
}
}),
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 Name | Affected Classes |
|---|---|
hook-misc | * |