Click here to Skip to main content
11,805,316 members (62,898 online)
Click here to Skip to main content

Tagged as

Show Image over an Image using CSS

, 25 Nov 2011 CPOL 72.4K 10
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 Green Alien | [Alien] 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
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 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 
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 
Silly question but how do i achieve it ??? I was not working on any script and HTML Frown | :( so can you please create a sample project and show it Smile | :)
+5 for nice concept.
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    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.151002.1 | Last Updated 25 Nov 2011
Article Copyright 2011 by thatraja
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid