Background

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

  • Use both background images and colors, with selectable gradient percentage.
  • Only background images which are initially in the viewport are loaded, improving page speed significantly.
  • Warehoused and drag&drop images are supported
Default
Muted
Primary
Secondary
Custom
Gradient
Gradient Angle
Gradient Percentage

Size modifier

Cover
Contain

Position modifiers

Center the Background contents by using the following flex classes at advanced tab: uk-flex uk-flex-center uk-flex-middle
Top Left
Bottom Right

Fixed

Blend modes

Combine both background color and image with blend modes to create dramatic filter effects, using the opacity settings to adjust the blending.
Multiply
Screen
Overlay
Darken
Lighten
Color Dodge
Color Burn
Hard Light
Soft Light
Difference
Exclusion
Hue
Saturation
Color
Luminosity