Recently, I observed an interesting issue at one of my client’s webpage. They wanted to add multiple background images to an element. Although as per this document, doing this in CSS is possible
background-image: url(images/emo.jpg) url(images/icon068.gif);
To get around this issue, here’s what I proposed which also works cross-browser. The trick is to place a similar element inside the parent element, in our case placing a DIV inside a DIV.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Multiple Background Images</title>
The output is as shown below with one image placed over the other. To overlap the parent image, change the width from 100px to 80px: