Click here to Skip to main content
Click here to Skip to main content
Alternative Tip

Tagged as

Show Image over an Image using CSS

, 25 Dec 2011
Rate this:
Please Sign up or sign in to 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Member 3514671
Software Developer (Senior) Private info
Russian Federation Russian Federation
No Biography provided

Comments and Discussions

 
GeneralIf that's an alternate to the tip/trick, please provide exam... PinmemberAnkur\m/29-Nov-11 3:20 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140821.2 | Last Updated 25 Dec 2011
Article Copyright 2011 by Member 3514671
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid