Click here to Skip to main content
13,351,985 members (87,419 online)
Click here to Skip to main content
Add your own
alternative version

Tagged as


10 bookmarked
Posted 9 Mar 2011

Show Image over an Image using CSS

, 25 Nov 2011
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 
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 
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 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.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.180111.1 | Last Updated 25 Nov 2011
Article Copyright 2011 by thatraja
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid