CSS3 multiple backgrounds not working
I am trying to create a simple div with two backgrounds using CSS3. I created a JS Fiddle with an example of what I am trying to do here: http://jsfiddle.net/nfcyv/
It doesn't work, however, and I was hoping someone could point out why or give me a helpful hint.
Below is a copy of the CSS:
#box { background:url("http://i.imgur.com/pAmGs.png") no-repeat scroll center bottom #000, url("http://i.imgur.com/fDMpm.png") repeat scroll 0 0 #000;height:500px;width:500px }
+3
source to share
2 answers
You can only specify the background color for the last layer, so you need to remove the first one #000
from your ad:
#box {
background:url("http://i.imgur.com/pAmGs.png") no-repeat scroll center bottom,
url("http://i.imgur.com/fDMpm.png") repeat scroll 0 0 #000;
height:500px;
width:500px
}
+4
source to share