How to have background-image and gradient background-color work on one selector in CSS?

Question

I'm trying to style scrollbars in Webkit and here's the code:

::-webkit-scrollbar-thumb {
  background-color: -webkit-linear-gradient(left, #424242 1%,#383838 100%);
  -webkit-border-radius: 3px;
}

Now, apart from making this scrollbar have round corners and gradient, I would also like to put little dots in the middle of it - you know, the ones scrollbars usually have so that it's easy to identify them as draggable scrollbars. Problem is, if I add these properties:

background-image: url("../images/scrollbar_dots.png");
background-position: center;
background-repeat: no-repeat;

the browser starts ignoring the previous ones and my scrollbar becomes transparent. I, obviously, can't just put a div inside and make it have this background with dots, because a scrollbar is a pseudo element. Any ideas how to make it work? (Javascript would do, but I don't even know how to get scrollbars from DOM).

Answer 1

Separate them using a comma, as gradients are nothing but background images, so you can use multiple background images by separating them using a comma...

background: url(#), YOUR_GRADIENT_CODE_HERE;
              ----^----

Demo