Solving The Missing Upload Feature
By now you probably head about the Divi 4.15 feature update for background patterns and masks. As soon as I saw it, I instantly noticed a potential dealbreaker – no custom upload option. The development team lead confirmed this also. And as you know, when I notice a missing Divi feature, I solve it! So in this tutorial, I will show you how to upload and apply your own custom Divi SVG background patterns and masks.
▶️ Please watch the video above to get all the exciting details! 👆
1. Prepare The SVG Files
The first step is to find or create the SVG file and prepare it for uploading to the web. To do this, you first need to understand how the background patterns and masks work.
Patterns
The patterns are very small tiles that are repeated over and over to make a pattern. So your pattern needs to be a “seamless” tile. You can either search form one online or create your own if you have the experience. I personally found some nice options by searching for “website SVG background pattern” and here is a nice post which lists several of the best sources.
Masks
Masks are a little different. Rather than a repeated tile, the ones in Divi are actually one complete file. They are also different in availability. I’m not even sure what you would search for online to find SVG examples, so most likely if you are wanting to use a custom shape then you already know how to use a vector editing program or can hire someone to create one for you. So I don’t really have any other recommendation for sourcing a custom background mask other than making one.
2. Add Custom CSS Class
The second step is to add a custom CSS class to the element, which would be the section, row, or module where you want to add the custom background pattern or mask. So just open the settings of that element and to the Advanced tab, open the Custom CSS IDs & Classes toggle, and add the class .pa-custom-background-mask-1 or .pa-custom-background-pattern-1. You can see that the number system will be very important as you add the custom CSS snippet in step #3.
3. Add Custom CSS Code
The third step is to add the relevant CSS code snippet below for either patterns or masks. Then you can repeat all the steps for more backgrounds on your site, and if you do that then you would also add a new snippet for each pattern or mask.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>General tab in the "Custom CSS" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
Background Pattern
.pa-custom-background-pattern-1 .et_pb_background_pattern {
background-image: url("PASTE FILE LINK HERE")!important;
}Background Mask
.pa-custom-background-mask-1 .et_pb_background_mask {
background-image: url("PASTE FILE LINK HERE")!important;
}4. Upload The SVG Files
The fourth step is to upload your SVG background pattern or mask files. You will need to allow SVG uploads into WordPress first, and I suggest doing that with a plugin such as Safe SVG. Once the plugin is active, you can upload the files to your WordPress Media library. This is important – we are not uploading the files to a page, but to the Media Library itself. Then, once it is uploaded, simply click on the file and click the “Copy URL to clipboard” button. Then go to the CSS snippet from step #3 and past the link into the snippet where it says PASTE FILE LINK HERE.
Thanks so much! I wish I had read this first before trying lots of other things! I found that a .png file does work instead of an .svg.
You’re welcome, glad this worked out for you!
Thank you, thank you, thank you! I was so excited for this option, but of course the ones offered aren’t what I’m looking for. This solves all the problems!!
Hey Heather,
We are glad that this was helpful.