Multiple images in CSS background-image

Question

In the lesson it states: "To specify more than one image, just separate the URLs with commas." I tried doing that, but it's not displaying any images in this case.

background-image: url("http://www.sololearn.com/images/tree.jpg"), url("http://www.kimmelorchard.org/img/icon_apple_gala.png");

What is the correct way to overlay a background image using two URLs?

Answer 1

Your css rule is right, just by default images are repeated, so first url declaration cover second... If none is displayed, make sure you target the good element: for example, try on body:

body { background-image: url("http://www.sololearn.com/images/tree.jpg"), url("http://www.kimmelorchard.org/img/icon_apple_gala.png");
}

... and/or test with inlined style declaration to be sure of target and css priorities ( if you declare a shorthand background after or with a higher priority background-image, you implicitly override background-image value by 'none' for example )

But anyway check @Tilo Klarenbeek answer to better manage each of your background image ;)