Add a Christmas Lights Background in Divi

|

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;
}

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

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.