Click here to Skip to main content
12,501,462 members (51,347 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as

Stats

80.8K 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 :bob: 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: No The reason was not Hiren. Even he helped me once when I d... Pin
Shilpi Boosar10-Mar-11 0:02
memberShilpi Boosar10-Mar-11 0:02 
GeneralRe: Oops, I have noticed that later. Actually that site saved th... Pin
thatraja10-Mar-11 6:17
mvpthatraja10-Mar-11 6:17 
GeneralRe: Why you are not visiting GIT? Dont worry Hiren is not visiti... Pin
SChristmas9-Mar-11 21:54
memberSChristmas9-Mar-11 21:54 
GeneralRe: Done ... The spelling of line was linet.gif and in HTML it i... Pin
Shilpi Boosar9-Mar-11 18:58
memberShilpi Boosar9-Mar-11 18:58 
GeneralRe: It display the bob but line image is not displayed. Path of ... Pin
Shilpi Boosar9-Mar-11 18:56
memberShilpi Boosar9-Mar-11 18:56 
It display the bob but line image is not displayed. Path of line image and html is at same place.
GeneralReason for my vote of 5 Neat, my 5 Pin
Espen Harlinn17-Jul-11 23:53
mvpEspen Harlinn17-Jul-11 23:53 
GeneralReason for my vote of 5 Nice Idea :) Pin
RaviRanjankr10-Mar-11 17:08
mvpRaviRanjankr10-Mar-11 17:08 
GeneralReason for my vote of 5 Great concept buddy Pin
SChristmas9-Mar-11 21:48
memberSChristmas9-Mar-11 21:48 
GeneralReason for my vote of 5 Nice one Raja. Pin
E$w@r9-Mar-11 21:28
memberE$w@r9-Mar-11 21:28 
GeneralSilly question but how do i achieve it ??? I was not workin... Pin
Shilpi Boosar9-Mar-11 18:19
memberShilpi Boosar9-Mar-11 18:19 
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.160919.1 | Last Updated 25 Nov 2011
Article Copyright 2011 by thatraja
Everything else Copyright © CodeProject, 1999-2016
Layout: fixed | fluid