Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Here is the first of the Divi Soup Quick Snacks – Styling the back to top button and including an image.
So let’s get cooking!
Cooking time
This should take you around 5 minutes max.
Preparation
The first thing we need to do is create a transparent PNG file containing the image we want to use in our back to top button. I am using part of the Divi Soup logo as you can see here.
Once you have that ready, upload it to your media library within WordPress and make a note of the path.
Method
Now for the CSS, copy and paste the code below into your Child Theme style.css or if you aren’t using a child theme (which you really should be) then paste into the Divi Theme Options epanel custom CSS section and don’t forget to save.
/*Back to top button styling*/
/*This section adds the image*/
.et_pb_scroll_top:before {
content: url(YOUR IMAGE URL HERE) !important;
}
/*This section changes the shape to a circle and moves the button in from the edge of the screen*/
.et_pb_scroll_top.et-pb-icon {
padding: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
right: 20px;
}
If you would like to retain the default icon and just style the shape then use this CSS instead.
/*Back to top button styling*/
.et_pb_scroll_top:before {
content: "2";
}
/*This section changes the shape to a circle and moves the button in from the edge of the screen*/
.et_pb_scroll_top.et-pb-icon {
padding: 8px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
right: 20px;
}
And that’s it, now you should have a custom back to top button.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content. 
Michelle X
Thank you very much, it worked perfectly.
Michelle,
) !important;
Can you help me remove the oval around my back-to-top button? https://socalcwc.com/
The button works great, but I would prefer not to have the oval around the image.
This is the code I used:
/*Back to top button styling*/
/*This section adds the image*/
.et_pb_scroll_top:before {
content: url
}
/*End Back to top button styling*/
Thanks for any help you can provide!
You can remove the background by targeting “.et_pb_scroll_top.et-pb-icon” in your custom CSS
Michelle How do you reposition the button slightly higher on the page?
.et_pb_scroll_top.et-pb-icon {
bottom: 100px;
}
Adjust the value as needed
Hello Dear,
Initially I was looking for a way to make the menu bar fixed even on mobile, so it remains at the top even after scrolling the page. But I got a new idea and I think it’s better.
the exact place of my Back to Top button, I want a similar button to it slightly above, with a hamburger menu icon. What this does is to open my Slide In menu.
I think this solution saves space vertically for mobile users and the menu button will always be near to them.
Is this possible?
Yes, check my menu here on Divi Soup on mobile, you can inspect the code
Hello, it does not work for me, copy your code and just show me the white button, but without the icon to attach it, can you tell me what I did wrong? This is the code that appends: / * Back to top button styling * / / * This section adds the image * / .et_pb_scroll_top: before { Content: http://demos.mingenio.com/wordpress/mingenio/wp-content/uploads/2017/04/mingenio-logo-boton-back.png! Important; } / * This section changes the shape to a circle and moves the button in the edge of the screen * / .et_pb_scroll_top.et-pb-icon { Padding: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; Border-radius: 50%; Right: 20px; Background-color: #fff; }… Read more »
This section of your code has incorrect syntax
.et_pb_scroll_top: before {Content: http://demos.mingenio.com/wordpress/mingenio/wp-content/uploads/2017/04/mingenio-logo-boton-back.png! Important;
}
It should be:
.et_pb_scroll_top:before {Content: url(http://demos.mingenio.com/wordpress/mingenio/wp-content/uploads/2017/04/mingenio-logo-boton-back.png) !important;
}
Thanks, it works perfect, look … http://demos.mingenio.com/wordpress/mingenio
Great, link isnt working for me though
Great post. Thanks!
I’m wanting to align the “back to top” button on the left instead of the right. I can’t seem to find how to do this anywhere.
My CSS made the whole button spread across the page:
.et_pb_scroll_top.et-pb-icon {
display: none;
position: fixed;
/* right: 0; */
left: 220px;
}
When I look at it in the dev inspector, it seems to work but then when I add it to my CSS it spreads across the page.
Site at: dom.gowebgomobile dot com
This is because you have the ‘right’ property commented out, so the Divi default settings are also being applied to the right, as well as your settings to the left.
Change to:
left: 20px;
right: auto;
hi there my code isnt working at all
please help
Hey, I need a little more info and a link in order to help?
Hi Michelle,
Thank you for sharing this nice back to top button. If i paste your css code into my child theme stylsheet nothing happen. The standard back to top button inside Divi works. Also the back to top plugin with a couple of variations. I diabled the plugin to make your back to top button work, but it doesn’t.
Are you able to check my site what’s wrong?
Best regards,
Tobias
Your site shows a holding page Tobias to I can’t check,, but this recipe is just styling, nothing in the code I provide will stop the button actually working so it would seem you have a conflict somewhere else
Just in case if some one wants to change the color of the existing icon:
.et_pb_scroll_top.et-visible
{
background-color:#e55c52;
}
Nice one Rav
Thanks for the tutorial!
I added a transparent background instead of white and it turned out beautifully!
Excellent
Thanks Jennifer!
Hello Michelle! This is great. How do you change the background color to white instead of gray?
Hi TJ
Just add this into your css:
background-color: #fff;
So instead of how it is in the tutorial it would look like this:
.et_pb_scroll_top.et-pb-icon { padding: 8px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; right: 20px; background-color: #fff; }I’m a little late. But, I just picked up the project again. Thank you! It looks wonderful!
Hi Michelle,
Great Trick. Love it.
However I think I have run into a little issue.
The png image file path is not brining the image withing the back to top circle like yours. What am I doing wrong.
Look froward to hearing from you.
Cheers, Jeasy
You’ll need to provide a link so I can take a look please
Thank you for your time and generosity in sharing this solution.
You are most welcome Mike
Hi Michelle – I dug around a bit, played around some more, and THIS works for me: .et_pb_scroll_top:hover:after { color: #ffffff; font: 10px arial, sans-serif; vertical-align: 10px; padding-right: 10px; content: ‘To the top!’; } For other readers: * color: sets the text color to white – set to whatever you want * font: sets the font size and family – again, adjust to your liking * vertical-align: play with it a bit to get the text aligned with your image – this worked for me * padding-right: add some padding after the text to keep it all nicely within the… Read more »
That’s great Roger, thanks so much for sharing with everyone, I am sure they will find it very useful
Brilliant – thanks! Quick question/addition request … how do we style the “alt/hover text” so that it’s clear that this is a “click to go to the top” button?
Hi Roger, I will try to find the time to look at this for you, it may require some JS. In the meantime you could switch out the image on hover for the up arrow using this:
.et_pb_scroll_top:hover:before {
content: “2”;
}
Hope that is helpful
Hi Michelle
That’s a nice short and to the point tutorial – thanks for sharing.
I might give this one a go.
Thanks Keith, hope it’s useful