Click here to Skip to main content
12,691,231 members (32,212 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


10 bookmarked

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


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


<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; } 
<img src="" 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" />

Browser Compatibility

I have tested this script in the following Web browsers:

  • Internet Explorer

  • Mozilla Firefox

  • Google Chrome

  • Safari

  • Opera


This sample code will show you our Bob :bob: in Prison.


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


About the Author

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

More coming soon....

You may also be interested in...


Comments and Discussions

GeneralRe: No The reason was not Hiren. Even he helped me once when I d... Pin
Shilpi Boosar10-Mar-11 1:02
memberShilpi Boosar10-Mar-11 1:02 
GeneralRe: Oops, I have noticed that later. Actually that site saved th... Pin
thatraja10-Mar-11 7:17
mvpthatraja10-Mar-11 7:17 
GeneralRe: Why you are not visiting GIT? Dont worry Hiren is not visiti... Pin
SChristmas9-Mar-11 22:54
memberSChristmas9-Mar-11 22:54 
GeneralRe: Done ... The spelling of line was linet.gif and in HTML it i... Pin
Shilpi Boosar9-Mar-11 19:58
memberShilpi Boosar9-Mar-11 19:58 
Done ... The spelling of line was linet.gif and in HTML it is line.gif.
Really very nice Smile | :) now i check your previous tip also Smile | :) ...
GeneralRe: It display the bob but line image is not displayed. Path of ... Pin
Shilpi Boosar9-Mar-11 19:56
memberShilpi Boosar9-Mar-11 19:56 
GeneralReason for my vote of 5 Neat, my 5 Pin
Espen Harlinn18-Jul-11 0:53
mvpEspen Harlinn18-Jul-11 0:53 
GeneralReason for my vote of 5 Nice Idea :) Pin
RaviRanjankr10-Mar-11 18:08
mvpRaviRanjankr10-Mar-11 18:08 
GeneralReason for my vote of 5 Great concept buddy Pin
SChristmas9-Mar-11 22:48
memberSChristmas9-Mar-11 22:48 
GeneralReason for my vote of 5 Nice one Raja. Pin
E$w@r9-Mar-11 22:28
memberE$w@r9-Mar-11 22:28 
GeneralSilly question but how do i achieve it ??? I was not workin... Pin
Shilpi Boosar9-Mar-11 19:19
memberShilpi Boosar9-Mar-11 19:19 
GeneralRe: Just copy & paste the HTML & save as a html file. Also the d... Pin
thatraja9-Mar-11 19:45
mvpthatraja9-Mar-11 19:45 
GeneralDude, Your HTML is not perfect. You haven't closed Bob's IMG... Pin
Venkatesh Mookkan9-Mar-11 18:49
memberVenkatesh Mookkan9-Mar-11 18:49 
GeneralRe: Yeah, but it's in 2nd revision. I can't fix that. Waiting fo... Pin
thatraja9-Mar-11 19:43
mvpthatraja9-Mar-11 19: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
Web02 | 2.8.170117.1 | Last Updated 25 Nov 2011
Article Copyright 2011 by thatraja
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid