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:
1 .christmas-lights-background { 2 background-image: 3 radial-gradient(circle, rgba(255, 0, 0, 0.5) 6px, rgba(255, 0, 0, 0.25) 10px, transparent 11px), /* Red light */ 4 radial-gradient(circle, rgba(0, 255, 0, 0.5) 8px, rgba(0, 255, 0, 0.25) 12px, transparent 13px), /* Green light */ 5 radial-gradient(circle, rgba(0, 0, 255, 0.5) 7px, rgba(0, 0, 255, 0.25) 11px, transparent 12px), /* Blue light */ 6 radial-gradient(circle, rgba(255, 255, 0, 0.5) 5px, rgba(255, 255, 0, 0.25) 9px, transparent 10px), /* Yellow light */ 7 radial-gradient(circle, rgba(255, 0, 255, 0.5) 6px, rgba(255, 0, 255, 0.25) 10px, transparent 11px), /* Magenta light */ 8 radial-gradient(circle, rgba(0, 255, 255, 0.5) 9px, rgba(0, 255, 255, 0.25) 14px, transparent 15px), /* Cyan light */ 9 radial-gradient(circle, rgba(255, 255, 255, 0.5) 8px, rgba(255, 255, 255, 0.25) 12px, transparent 13px); /* White light */ 10 background-size: 11 130px 130px, 12 150px 150px, 13 140px 140px, 14 120px 120px, 15 130px 130px, 16 160px 160px, 17 150px 150px; 18 background-position: 19 0 0, 20 120px 30px, 21 90px 100px, 22 80px 60px, 23 50px 50px, 24 140px 130px, 25 110px 20px; 26 background-repeat: repeat; 27 }
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