Click here to Skip to main content
15,867,308 members
Articles / Web Development / HTML
Tip/Trick

Show Image over an Image using CSS

Rate me:
Please Sign up or sign in to vote.
5.00/5 (9 votes)
25 Nov 2011CPOL 112.7K   10   13
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


XML
<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)


Written By
Team Leader
India India
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
GeneralRe: No The reason was not Hiren. Even he helped me once when I d... Pin
ShilpiP10-Mar-11 0:02
ShilpiP10-Mar-11 0:02 
GeneralRe: Oops, I have noticed that later. Actually that site saved th... Pin
thatraja10-Mar-11 6:17
professionalthatraja10-Mar-11 6:17 
GeneralRe: Why you are not visiting GIT? Dont worry Hiren is not visiti... Pin
Sandesh M Patil9-Mar-11 21:54
Sandesh M Patil9-Mar-11 21:54 
GeneralRe: Done ... The spelling of line was linet.gif and in HTML it i... Pin
ShilpiP9-Mar-11 18:58
ShilpiP9-Mar-11 18:58 
GeneralRe: It display the bob but line image is not displayed. Path of ... Pin
ShilpiP9-Mar-11 18:56
ShilpiP9-Mar-11 18:56 
GeneralReason for my vote of 5 Neat, my 5 Pin
Espen Harlinn17-Jul-11 23:53
professionalEspen Harlinn17-Jul-11 23:53 
GeneralReason for my vote of 5 Nice Idea :) Pin
RaviRanjanKr10-Mar-11 17:08
professionalRaviRanjanKr10-Mar-11 17:08 
GeneralReason for my vote of 5 Great concept buddy Pin
Sandesh M Patil9-Mar-11 21:48
Sandesh M Patil9-Mar-11 21:48 
GeneralReason for my vote of 5 Nice one Raja. Pin
TweakBird9-Mar-11 21:28
TweakBird9-Mar-11 21:28 
GeneralSilly question but how do i achieve it ??? I was not workin... Pin
ShilpiP9-Mar-11 18:19
ShilpiP9-Mar-11 18:19 
GeneralRe: Just copy & paste the HTML & save as a html file. Also the d... Pin
thatraja9-Mar-11 18:45
professionalthatraja9-Mar-11 18:45 
GeneralDude, Your HTML is not perfect. You haven't closed Bob's IMG... Pin
Venkatesh Mookkan9-Mar-11 17:49
Venkatesh 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
professionalthatraja9-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.