I've run into an issue with multiple background images. When I turn off the second background-image, the first background-image is shown, or vise versa, how come I can't have multiple background-images successfully, what is going wrong ?

#element {

position:relative;

background-image:url() // FIRST / TOP

background-image:url() // SECOND / BOTTOM

background-repeat:no-repeat/repeat //etc
 

 

Not had chance to test but off the top of my head try comma separating the url's on a single property:

 

background-image: url('...'), url('..');

 

the way you wrote it one will override the other, it's aking to writing

width: 50px;

width: 100px

-- The second width will override the first.

Edited March 15, 201511 yr by rbrtsmith

Not had chance to test but off the top of my head try comma separating the url's on a single property:

 

background-image: url('...'), url('..');

 

the way you wrote it one will override the other, it's aking to writing

width: 50px;

width: 100px

-- The second width will override the first.

Nope that didn't work

It would work. Problem is both images have the same backround-position, you need to define each one. eg.

div {
  background-position: 0px 0px, center;
}

http://jsfiddle.net/5d7foo1p/

It would work. Problem is both images have the same backround-position, you need to define each one. eg.

div {
  background-position: 0px 0px, center;
}

http://jsfiddle.net/5d7foo1p/

Thanks