There can be circumstances where one would like to add two different overlapping backgrounds which has it own functionality such as no repeat /repeat x /repeat y.

In the example above, we have 'repeat-x' pot background overlapping no-repeat fence background and, and the magic here is we have used a single style tag.

IE users, we are sorry, you might not be able to view multiple background style used in the above placeholder because IE doesn't multiple background style and the big problem there is it just shows a blank screen.

Syntax used :

Note: Background right in front should be placed first (url(images/flower.png)) proceeded by the next in view.

As mentioned above, since IE does not recognises multiple background style tag, we might have to work around to get the similar effect by creating separate divs with a background allotted to it and use them in web pages by inserting one div into the other.

For Example: Considering this tutorial scenario, we can create separate 'div' style tags for fence and flower pot. Insert flower pot style div inside the fence div.

Are you all excited to construct your own CSS3 / HTML5 website and fear that website hosting might work out expensive, you can opt for some cheap web hosting and go all bonkers