Show Image over an Image using CSS
0/5 (0 vote)
If you have a large image, would you need to create multiple img tags? I would better create a div element with position:absolute to be over the image and set the width and height to cover the underlying image. Then set background-image to that div as url(line.gif) but the image should be...
If you have a large image, would you need to create multiple img tags? I would better create a div element with position:absolute to be over the image and set the width and height to cover the underlying image. Then set background-image to that div as url(line.gif) but the image should be corrected to have opacity. And set the background-repeat CSS value.
P.S.: I'd better add code to demonstrate:
<html>
<head>
<title>Show Image over image</title>
<style type="text/css">
.line-decoration {
background: repeat url(data:image/gif;base64,R0lGODlhDwABAIABAAAAAP///yH+EUNyZWF0ZWQgd2l0aCBHSU1QACH5BAEKAAEALAAAAAAPAAEAAAIEhIOpWAA7);
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}
</style>
</head>
<body>
<div style="position:absolute;">
<img src="http://www.codeproject.com/Info/images/codeproject125x125.gif" />
<div class="line-decoration"> </div>
</div>
</body>
</html>
The image here is coded with base64 and it is just 1-pixel height line with the first three pixels black and 12 pixels opacity in GIF. So the outer div has absolute position and it will have the same size as the image. The inner div with the line-decoration class has background image and absolute position bound to the left-top corner of the outer div. So in my example, you don't have to know the image size or create multiple .imgB7 styles and elements.