Background Pattern

Choose a Background Pattern

You can choose a background pattern in the block sidebar by clicking on the ‘Choose Pattern’ button. You’ll be prompted to select an image from your media library or upload a new one. This can be any image, but we recommend SVG (or PNG if SVG isn’t available) and we suggest using a pattern that repeats seamlessly.

Background Attachment

Some blocks allow you to set the background attachment. A background with Fixed attachment will remain anchored to the browser window as the user scrolls, creating a parallax effect.

Set an Overlay

Whether you need to darken or tint a pattern to maintain the legibility of text on top of it or as a stylistic choice, there are many situations where you’ll want to add an overlay to your pattern. The overlay tool in your block sidebar lets you choose a color from your palette (with the addition of pure black or pure white). The overlay opacity slider will determine how much overlay to apply to the pattern, with 100% being solid color.

Select X as the overlay color to disable the overlay completely, or set its opacity to 0%.

Select a Background Size

The Background Size range field will scale the background pattern. Choose a size that looks good on both desktop and mobile.