Question

I’ve designed a custom webkit scrollbar in transparent png format but it is not transparent on my site.

Is there any way I can make the the left edges transparent?

Here is my code:

::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    background: transparent url(images/backgrounds/scrollbar.png) repeat-y;
}


::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

The website url is: http://captainjackspiratepartys.co.uk/

Answer 1

I’m using Chrome and your bar didn’t work for me, I had to use:

::-webkit-scrollbar-track-piece:start{
     background: transparent url(images/backgrounds/scrollbar.png) repeat-y !important;
}

::-webkit-scrollbar-track-piece:end{
    background: transparent url(images/backgrounds/scrollbar.png) repeat-y !important;
}

also, I don’t believe you can actually make the bar transparent with just css. Instead of transparent, try to make your image have just a dark background. It will be less obvious than white