Add a Snowy Background in Divi

|

Here's how to add a static tiled snow effect as the background to any Divi section, row or module. Like this:

In the bleak midwinter, frosty wind made moan,
Earth stood hard as iron, water like a stone;
Snow had fallen, snow on snow, snow on snow,
In the bleak midwinter, long ago.

To achieve this, first add the following CSS code to your site:

.snowflake-background {
    background-image: 
        radial-gradient(circle, #e6e6e6 1px, transparent 1px),
        radial-gradient(circle, #e6e6e6 2px, transparent 2px),
        radial-gradient(circle, #dddddd 4px, transparent 4px),
        radial-gradient(circle, #dddddd 6px, transparent 6px),
        radial-gradient(circle, #cccccc 8px, transparent 8px),
        radial-gradient(circle, #cccccc 10px, transparent 10px),
        radial-gradient(circle, #bbbbbb 14px, transparent 14px);
    background-size: 
        91px 91px,
        107px 87px,
        69px 109px,
        88px 72px,
        111px 123px,
        134px 97px,
        157px 145px;
    background-position:
        0 0,
        93px 17px,
        37px 93px,
        86px 68px,
        51px 59px,
        129px 116px,
        105px 34px;
    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 "snowflake-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.