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


Tags: html,css,webkit,scrollbar,background-color

Problem :

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).



Solution :

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


    CSS Howto..

    How to change CSS id property depending upon screen size

    How to have the class=“selected” depending on what the current page/url is

    How to center without the
    tag using CSS?

    How to add code area css style to HTML

    How to set animation in css?

    How can I mix vertically-centered elements with different font sizes and retain consistent line height?

    How can I slide an element hidden by external CSS with Scriptaculous?

    How can I nullify css property?

    How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

    How do I get spotlight/shadow position to remain exactly same relative horizontal center position regardless of zoom?

    How to get a JavaFX XYchart to work with user defined CSS?

    How to centre a
    within several other
    s (using a mixture of w3.css and css)

    How to fold/unfold a DIV like on this website

    How to generate a source map for minified CSS generated by dotless

    Jquery: Show/hide menu with single button

    how to set border spacing in javafx

    CSS: how to address Samsung Android browser?

    How do I create a fallback for the HTML5 search cancel button in webkit?

    how to vertically align footer contents with css

    How to remove the gap between each list-item in an unordered list?

    How to use preloaded CSS spritesheet in javascript?

    How to style table as responsive using Jquery mobile?

    How to set alternating color to nested and sibling divs with certain class.

    How to solve CSS -webkit-appearance issue

    How can I scale element height and width using CSS?

    CSS How to place a submit button on a new line?

    jquery - How to determine if a div changes its height or any css attribute?

    How to fix maximum width of a div? If contents of that div's exceeds than maximum width, we get scroller?

    how to make colors generated via Javascript be stored permanently in CSS file with or without use of PHP

    how to give css for arranging label, textbox and text area side by side in the same line