Multiple background images - Can't bring image to the front

Question

I'm using CSS3 gradients for my menu button's background color/hover color and I'm having trouble getting one of my backgrounds (an icon) to appear above the gradient, on hovering. CSS:

  #nav_menu a:hover {
    background-image: url("../img/menu_icon.png") no-repeat 3%, 50%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aa2329), color-stop(100%, #bb4d50));
    background-image: -webkit-linear-gradient(#aa2329, #bb4d50);
    background-image: -moz-linear-gradient(#aa2329, #bb4d50);
    background-image: -o-linear-gradient(#aa2329, #bb4d50);
    background-image: linear-gradient(#aa2329, #bb4d50); 
}

The top background-image is not visible upon hovering. I was able to get it working when not hovering by having a separate background image for the li and the icon as a background image for the link nested in the li. I can't do the same thing here as I have to use the link's hover pseudoclass for the gradient background image. Any suggestions would be much appreciated.

Could you provide a fiddle? – Adam Fratino Mar 13 '14 at 17:50 — Adam Fratino, Mar 13 '14 at 17:50

Josh Crozier · Accepted Answer · 2014-03-13T18:01:42.043

You are using the background-image property to modify the the background-position/background-repeat properties. Using the background shorthand property (not background-image), you could use something like this:

background: url("..") no-repeat 3%, 50%;

Which is essentially just:

background-image: url("..);
background-repeat:no-repeat;
background-position:3%, 50%;

Now, according to the spec - for multiple backgrounds the syntax is as follows:

[ <bg-layer> , ]* <final-bg-layer>

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> 
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

Therefore, you would use the following:

WORKING EXAMPLE HERE

background: url("//placehold.it/100") no-repeat 3%, 50%,
           -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #aa2329), color-stop(100%, #bb4d50)),
           -webkit-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
           -moz-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
            -o-linear-gradient(#aa2329, #bb4d50);
background: url("//placehold.it/100") no-repeat 3%, 50%,
            linear-gradient(#aa2329, #bb4d50);

Multiple background images - Can't bring image to the front

1 Answers1