multiple background pics in css

Question

this is what im trying to do...

ul#newnav a{ /*--This is basically the hover state of navigation--*/
color: #555;
background: url(images/a_bg.gif) repeat-x left bottom;}

ul#newnav a{ background: url(images/navpic.png) no-repeat top left;}

and of course its only loading the last one but is it anyway I can load both.

Answer 1

You can use :hover pseudo class

ul#newnav a{ background: url(images/navpic.png) no-repeat top left;}

ul#newnav a:hover { /*--This is basically the hover state of navigation--*/
color: #555;
background: url(images/a_bg.gif) repeat-x left bottom;}

See The dynamic pseudo-classes: :hover, :active, and :focus

In CSS3 you can have multiple backgrouds for an element

See Multiple backgrounds with CSS3

Answer 2

With CSS, you can only one background at a time. You can try to have multiple layers and put backgrounds in each layer, if they contain transparencies.