Blur Backgrounds

Make your content stand out by blurring the background images. This will work on both parallax and non-parallax backgrounds.

classes

  • blur1
  • blur2
  • blur3
  • blur4
  • blur5
  • blur6

Usage

Add any one of the classes Section, Row, Column, orĀ Module Settings > Advanced tab > CSS ID & Classes > CSS Class.

Use with

Sections, Rows, Columns, or Modules

Design

Set the background image and add one of the classes above.

The larger the number the larger the blur, so:

blur1 = small blur
blur6 = biggest blur.

Examples

No blur

with no parallax

blur1

with CSS parallax

blur2

with no parallax

blur3

with true parallax

blur4

with CSS parallax

blur5

with no parallax

blur6

with CSS parallax

Be creative with the blurs!