How to: Use an SVG Pattern as a background

by | Tips & Tricks

Below is an extract from our ‘Tips & Tricks‘ page.

There are many ways to fill the background in Divi including using solid colors, gradients, images or videos. but if you want to use a repeating pattern of some kind, one way to do so is to use an SVG pattern. SVG images are typically smaller than bitmap images and remain sharp on high resolution screens. An example can be seen on our Tips & Tricks page and also on the Home page as the background to the Testimonials.

An excellent source of SVG paterns can be found at Hero Patterns. Here, over 90 patterns are available free and the foreground colour, background colour and opacity can be changed to suit your requirements. Go to the website and select a pattern you like and click on it. A pop-up appears in which you can change the foreground/background colours and opacity. Once you are happy with your design, click in the box at the top containing the code and copy all of the code.

Lets suppose you want to apply this pattern to a Divi section background. First make sure no other backgrounds are selected in the section. e.g. if you were previously using a gradient background, hover over the gradient preview in the Section | Content | Background Color | Gradient tab on Divi Builder and click the bin icon to delete it. Now in the Section settings, select Advanced | Main Element and into the box paste the CSS you previously copied from Hero Patterns. Congratulations, you now have a pattern, but if you preview it you will see that the shapes are huge because it is stretching a relatively small image to fill the screen. To overcome this, we need to add a little more CSS above that which you previously pasted into the Main Element box. The code to add is:

Now the pattern will look the same as that which you originally designed on the Hero Pattern’s website as you will see in the preview. If you are happy go ahead and update the page, or if not and want to revert to your original background, simply exit the page without saving

Signup for the iConnik quarterly newsletter

Thanks. You have successfully signed up

Share This