Scroll to top custom image

Support
#1

Hi there, does anyone know if we can style the scroll to top icon by changing the icon to an image that I can upload?

Thanks!

#2

Hey Tariq,

Thanks for writing in! Yes, that is possible with custom CSS coding. Be advised that custom coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

Perhaps these threads can help you get started with your customization.
https://theme.co/forum/search?q=.x-scroll-top

Cheers.

#3

Hi Ruenel thanks for getting back to me, I am trying to add my own icon here as per the last bit of code that worked for someone else on the forum but nothing is showing on the website (reeliumstudio.com).

I am trying to replace the scroll up icon with this one: https://reeliumstudio.com/wp-content/uploads/2025/06/arrow.png

/* update base styles /
.x-scroll-top {
overflow:hidden;
border: none;
border-radius: 0;
height: auto;
width: auto;
cursor: pointer;
bottom: 30px;
}
.x-scroll-top.right {
right: 30px;
}
/ hide arrow */
.x-scroll-top > i {
display: none;
}

/* change in/hover opacity */
.x-scroll-top.in {
opacity: 0.875;
}

.x-scroll-top.in:hover {
opacity: 1;
}

/* copy over images */
.x-scroll-top:before {
background: url(https://popgardens.co.uk/wp-content/themes/gardening/images/totop.png) no-repeat left top;
width: 45px;
height: 54px;
display: block;
background-size: 45px;
content: “”;
}

.x-scroll-top:after {
content:"";
position:absolute;
left:0;
bottom:0;
background:url(https://popgardens.co.uk/wp-content/themes/gardening/images/totop-bottom.png) repeat;
width: 500px;
height: 7px;
background-size: 45px;
animation: moveSlideshow 17s linear infinite;
}

@keyframes moveSlideshow {
100% {
-webkit-transform: translateX(-90%);
}
}

#4

Hi Tariq,

Although custom CSS falls outside the scope of Theme Support, I’d still recommend checking whether the image URL used in your CSS is valid and accessible. If the image isn’t loading, please try replacing it with a working URL.

If you’re still experiencing issues, it may be best to consult a developer who can assist with advanced customization. Alternatively, you can explore our newly launched service — ONE — which is specifically designed to help with requests that go beyond standard theme support.

Thanks

#5

Hi @tristup thank you, is my image URL meant to just replace where it currently shows:

background:url(https://popgardens.co.uk/wp-content/themes/gardening/images/totop-bottom.png)

or do I need to put something in the:

content:"";

?

Again thanks for your help

#6

Hi Tariq,

The URL you are setting as the background image is not available. Please check before adding that. For further issues or questions, I would suggest you hire a developer who can assist you to do the customization or you can avail of our newly launched service called One, where we answer the questions beyond normal theme support.

Thanks