Divi provides a set of default background patterns and masks accessible in the module settings under Background group options.
If you want to apply your own Background Pattern or Background mask to your Divi modules you can do that by adding a small piece of CSS code.
Adding Background Pattern and Background Mask
Uploading your custom pattern/mask to the WordPress library:
Go to the WP Dashboard / Media and upload the pattern/mask file
Adding CSS Classes
Open the module settings that you want to apply the custom Pattern/Mask and navigate to the Advanced tab
Look for the Custom CSS field:
In case you want to apply a custom background pattern add
divi-custom-bg-patternCSS classIn case you want to apply a custom background mask add
divi-custom-bg-maskCSS class
Adding CSS code to apply the custom pattern/mask
Go to the Dashboard -> Divi -> Theme Options -> General Settings
Look for the Custom CSS field at the very bottom
In case you want to apply a custom pattern background add this CSS snippet:
.divi-custom-bg-pattern .et_pb_background_pattern {
background-image: url("CUSTOM_PATTERN_URL")!important;
}In case you want to apply a custom pattern background add this CSS snippet:
.divi-custom-bg-mask .et_pb_background_pattern {
background-image: url("CUSTOM_MASK_URL")!important;
}
Make sure to replace the "Custom Pattern URL" or "Custom Mask URL" fields with your actual Mask or Pattern URL.