Sources:
- Snow flakes: https://divilife.com/add-falling-snowflakes-divi-wordpress-website/
- Confetti: https://almostinevitable.com/divi-tutorial-confetti-in-the-background/
Add the snowflakes images to WordPress, I uploaded them with FTP into the /uploads/snowflakes/ folder so they are not in the media library. Add the following CSS to the theme options to show them site wide. For a single page you only add it to the custom css of that page.
/* -- START Snowflakes -- */
body {
position: relative;
}
body:before {
content: '';
display: block;
position: absolute;
z-index: 999999999999999 !important;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url('/wp-content/uploads/snowflakes/snowflakes-a.png?dl=1'),
url('/wp-content/uploads/snowflakes/snowflakes-b.png?dl=1'),
url('/wp-content/uploads/snowflakes/snowflakes-c.png?dl=1');
-webkit-animation: snow 15s linear infinite;
-moz-animation: snow 15s linear infinite;
-ms-animation: snow 15s linear infinite;
animation: snow 15s linear infinite;
}
@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
/* -- END Snowflakes -- */Code language: CSS (css)
For a single row, section or module, change ‘body’ from the first part into a css class like below and add that class in the row, section or module.
.hws-snow {
position: relative;
}
.hws-snow:after {Code language: CSS (css)