1. Adding Falling Hearts to Your Entire Website
It’s time for Valentine’s Day! Today we are going to show you how to creatively add Valentine’s Day hearts to your website! We’ll show you how to add falling hearts with Divi in this step-by-step tutorial.
Let’s get to it!
Add Custom CSS
To locate the Custom CSS box navigate to Divi > Theme Options and scroll all the way down the page until you see the Custom CSS box.
Copy the code and paste to the Custom CSS box.
body {
position: relative!important;
}
body:before {
content: '';
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url(https://wpzone.co/wp-content/uploads/2019/02/hearts.png);
animation: falling-hearts 80s linear infinite;
}
@keyframes falling-hearts {
0% { background-position: 0% 0%; }
100% { background-position: 0% 100%; }
}
@-webkit-keyframes falling-hearts {
0% { background-position: 0% 0%; }
100% { background-position: 0% 100%; }
}
@-webkit-keyframes falling-hearts {
0% { background-position: 0% 0%; }
100% { background-position: 0% 100%; }
}
Code updated February 20, 2024
2. How to add Hearts ❤️ to a single page?
What if you want to display falling hearts on a single page? Add this CSS snippet to the Divi Builder Page Settings and changes will only be applied to the page itself. You can do it easily by adding the above code to your custom code module on an individual page, within the Divi Page Settings.
Go to your page and open the Divi Builder Settings
Paste the CSS code to Custom CSS box.
Final Thoughts
In this post, we’ve show you how to add the falling hearts effect to your Divi website. If you have any questions or suggestions, make sure you leave a comment in the comment section below!
This is fantastic! Thank you very much. However, my heart are floating upward not downward, how do I change the direction?
Mine instead of falling are going up, is there any way to change that?
Anna, I’d like to do this same animation for St. Patrick’s Day with clovers vs hearts but I’m unsure how to create the same sort of image you linked for the hearts. Is there an easier way to accomplish this?
Hi Cindy, unfortunately, I don’t have any other solution I can provide. The best would be to create a new image using graphic software
Not working on mobile devices
Hi Kalash, this snippet is working also for mobile devices: https://tutorials.aspengrovestudio.com/how-to-add-falling-hearts-to-your-divi-wordpress-website/
Hey found this tread and I got it to work however its cutting off half way through my webpage wondering if u guys know a fix?
Hi, looks like you are not using Divi, and body element has fixed height. Try using
body .background-image-overlayselector instead.Clever! Thank you. Would there be any way to stop the hearts after some amount of iterations — and have the hearts just disappear gently?
Thank you so much for sharing this!
on mobile device does not working.
Hi, tutorial is also working for mobile devices 🙂
My website requires html code. How can I get this to work?
This tutorial doesn’t require adding any HTML, we are working on the existing “body” html element.
This works great above the fold, but is there a way to make them fall on the entire page, even when you scroll down?
Hi Curt, it works for the entire page: https://tutorials.aspengrovestudio.com/how-to-add-falling-hearts-to-your-divi-wordpress-website/
Can this be applied to a section only?
Yes, but it would require some changes in the code
Can I replace the heart with another item? I tried it by replacing the background image but it turns out that the animation is not the same. How to adjust the animation? Thank you.
Hi Candy, yes you can replace background image. If you want to have the same animation effect, create image similar to the original https://wpzone.co/wp-content/uploads/2019/02/hearts.png
Worked the second time of asking thanks so much
Adrian
Works! <3
Works for me! Thank you for tutorial.
I have updated the CSS code and works fine! I’ve noticed that content ''; was replaced with content ‘’; . Leaving here to other people that may have a similar issue ?
Enjoy!
This doesn’t work for me at all.
Thank you Jeremy for a comment! Please send me a link to your website and I will investigate what’s wrong with the code 🙂
This is really so awesome!
Thanks so much!
wow – Thanks
—stooni
heres what i used in CSS
body {
position: relative !important;
}
body:before {
content: ”;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url(‘https://www.myempshield.com/wp-content/uploads/2019/02/hearts.png’);
animation: falling-hearts 18s linear infinite;
}
@keyframes falling-hearts {
0% {background-position: 0% 30%;}
}
@-moz-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}
@-webkit-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}
Hello @empshield, please change 14 line to
background-image: url(https://www.myempshield.com/wp-content/uploads/2019/02/hearts.png);
hey brother. great article. Maybe im just a dummy but, i couldn’t get it to work on my site.
Doing a big valentines sale tomorrow. Would really like to get this to work. and tips? Copy and paste seems pretty simple so… no idea why its not working..
tried single page method and site wide mehtod.
neither worked 🙁
https://www.myempshield.com
please let me know what i can do
Stephen,
Didn’t work. 🙁
I added it to the homepage only with no success and added to the site globally with no success.
I believe I followed your instructions but I’ve been known to be wrong before.
Any ideas of what I did wrong?
How adorable! Okay, just tried it and it didn’t work for me 🙁 Help! 🙂
Works terrific. A super easy CSS drop to impress clients. Thanks SJ!
Thanks for the love!
Nice effect and easy to implement
You might consider using the HTML < code > element to display the CSS so the character encoding for the quotes/apostrophe characters in the content and background-image use the correct character encoding.. After copying and pasting your CSS I had to fix the quote characters in order to get the CSS to work.
Cheers!
Jules
Thank you Jules. good catch!
It does not seem to be working. Is something missing?
body {
position: relative !important;
}
body:before {
content: ”;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
background-image: url(https://wpzone.co/wp-content/uploads/2019/02/hearts.png);
animation: falling-hearts 18s linear infinite;
}
@keyframes falling-hearts {
0% {background-position: 0% 30%;}
}
@-moz-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}
@-webkit-keyframes falling-hearts {
0% {background-position: 0% 30%;}
}
Hello Emma, please change 5 line to content:'';
Love it – thanks for the information.