Click here to Skip to main content
12,456,128 members (53,308 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

80.4K views
10 bookmarked
Posted

Show Image over an Image using CSS

, 25 Nov 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
Show Image over an Image using CSS

Description

This Tip/Trick shows how to show an image over another image. Using the properties position, left, top, z-index, you can achieve that.

Code

<html>
<head>
<title>Show Image over image</title>
<style type="text/css"> 
img { position:absolute; top: 25px; z-index: 2;}
.imgA1 { left: 0px; } 
.imgB1 { left: 0px; } 
.imgB2 { left: 15px; } 
.imgB3 { left: 30px; } 
.imgB4 { left: 45px; } 
.imgB5 { left: 60px; } 
.imgB6 { left: 75px; } 
.imgB7 { left: 90px; } 
.imgB8 { left: 105px; } 
.imgB9 { left: 120px; } 
</style>
</head>
<body>
<img src="http://www.codeproject.com/Info/images/codeproject125x125.gif" style="z-index: 1;" class="imgA1"/>
<img src="line.gif" class="imgB1" />
<img src="line.gif" class="imgB2" />
<img src="line.gif" class="imgB3" />
<img src="line.gif" class="imgB4" />
<img src="line.gif" class="imgB5" />
<img src="line.gif" class="imgB6" />
<img src="line.gif" class="imgB7" />
<img src="line.gif" class="imgB8" />
<img src="line.gif" class="imgB9" />
</body>
</html>

Browser Compatibility

I have tested this script in the following Web browsers:
  • Internet Explorer
  • Mozilla Firefox
  • Google Chrome
  • Safari
  • Opera

Result

This sample code will show you our Bob Green Alien | [Alien] in Prison.

License

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

Share

About the Author

thatraja
Web Developer
India India
Retired from Q/A section & Technical forums since 2014

More coming soon....

You may also be interested in...

Pro
Pro

Comments and Discussions

 
GeneralRe: Just copy & paste the HTML & save as a html file. Also the d... Pin
thatraja9-Mar-11 18:45
mvpthatraja9-Mar-11 18:45 
GeneralDude, Your HTML is not perfect. You haven't closed Bob's IMG... Pin
Venkatesh Mookkan9-Mar-11 17:49
memberVenkatesh Mookkan9-Mar-11 17:49 
GeneralRe: Yeah, but it's in 2nd revision. I can't fix that. Waiting fo... Pin
thatraja9-Mar-11 18:43
mvpthatraja9-Mar-11 18:43 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    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 | Terms of Use | Mobile
Web01 | 2.8.160826.1 | Last Updated 25 Nov 2011
Article Copyright 2011 by thatraja
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid