Here's how to add a static tiled Christmas light effect as the background to any Divi section, row or module. Like this:
Sleigh bells ring, are you listening?
In the lane, snow is glistening
A beautiful sight,
We're happy tonight.
Walking in a winter wonderland.
To achieve this, first add the following CSS code to your site:
.christmas-lights-background {
background-image:
radial-gradient(circle, rgba(255, 0, 0, 0.5) 6px, rgba(255, 0, 0, 0.25) 10px, transparent 11px), /* Red light */
radial-gradient(circle, rgba(0, 255, 0, 0.5) 8px, rgba(0, 255, 0, 0.25) 12px, transparent 13px), /* Green light */
radial-gradient(circle, rgba(0, 0, 255, 0.5) 7px, rgba(0, 0, 255, 0.25) 11px, transparent 12px), /* Blue light */
radial-gradient(circle, rgba(255, 255, 0, 0.5) 5px, rgba(255, 255, 0, 0.25) 9px, transparent 10px), /* Yellow light */
radial-gradient(circle, rgba(255, 0, 255, 0.5) 6px, rgba(255, 0, 255, 0.25) 10px, transparent 11px), /* Magenta light */
radial-gradient(circle, rgba(0, 255, 255, 0.5) 9px, rgba(0, 255, 255, 0.25) 14px, transparent 15px), /* Cyan light */
radial-gradient(circle, rgba(255, 255, 255, 0.5) 8px, rgba(255, 255, 255, 0.25) 12px, transparent 13px); /* White light */
background-size:
130px 130px,
150px 150px,
140px 140px,
120px 120px,
130px 130px,
160px 160px,
150px 150px;
background-position:
0 0,
120px 30px,
90px 100px,
80px 60px,
50px 50px,
140px 130px,
110px 20px;
background-repeat: repeat;
}Related Post: Adding CSS to the Divi Theme
Now, on any section, row or module that you want to add falling snow to, just give it a CSS Class of "christmas-lights-background", like so:
0 Comments