|
|
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
div {
background-image: url(images/emo.jpg) url(images/icon068.gif);
}
however not all browsers support this feature.
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"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Multiple Background Images</title>
<style type="text/css">
#outerDiv
{
height:100px;
width:100px;
background-image: url(images/emo.jpg);
background-repeat: repeat-x;
}
#innerDiv
{
height:80px;
width:100px;
background-image: url(images/icon068.gif);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div id="outerDiv">
<div id="innerDiv">
</div>
</div>
</body>
</html>
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:
'Like' us on our FaceBook page if you find this blog useful. Thanks!
Did you like this post?
|
|
||
|
|
|
Save on Delicious |
|
subscribe via rss |
|
subscribe via e-mail |
|
print this post |
|
follow me on twitter |
About The Author
comments
2 Responses to "Multiple Background Images for an Element in CSS"Excellent Tip! I had a similar issue in my ASP.NET Page
in web design CSS plays a common and most significant role. a web designer who is master in playing with CSS can demand remuneration in his own way.
Post a Comment