Looking to add design flair to your website but not sure how or where to start? Background patterns could be the answer.
Background patterns make it easy for non-designers to add instant style to a website.
This post explains how to find and use them.
What are background patterns?
Background patterns are pre-built image files of visually appealing patterns. Free pattern files can be found easily on the internet.
Where to find patterns
There is a large number of websites with free or purchasable patterns to download, and Google is your friend.
Search for ‘background patterns’ or ‘ background textures’.
You’ll be spoilt for choice!
How to use background patterns
Place a pattern in the Background field of a container block of some sort (the columns or group blocks, for example), and then place your content in the block, and the content will appear with the pattern behind it .
Example
On our homepage, you will see this layout. It is a container block (from the Spectra pagebuilder plugin) with two other container blocks nested inside it and a background pattern in the top container.
If I take a screenshot of it in edit mode, you can see the two nested containers highlighted inside the top container and the background pattern sitting behind them.
The top container simply has this pattern file dropped into its Background field:
The other two containers then automatically sit on top of the background pattern.
How to use the Background field
In the Spectra container blocks editing options, go to the Style tab.
The top option is the Background field.
You get the choice of four types of background: colour, gradient, image and video.
Upload a pattern image file into the Image option and the pattern then appears in the background of the container. Anything else you place in the container will appear above it. Instant style!
When the image is uploaded, you will have editing options to alter its position and size inside the container.
