how can i overlay one image on top of another using css realtive positioning

**chrissie76** · Sep 1, 2007 09:15

Hi,
I am designing a website for an (real) estate agent. when a property is sold i want to place a sold banner over the image (top left hand corner). i have managed to sit one image on top of the other but it makes the <div> that expand so that it would be big enough to accommodate one on top of the other. absolute positioning wouldn't be appropriate, as the images would change position depending on where the sold property was returned in teh query and length of summary details etc etc.
any thoughts as how to collapse the <div> or another way to skin this css cat would be appreciated. i have searched the web and my css books and this seems to be undocumented, although i have seen it done on sites before. Many Thanks

**salt** · Sep 1, 2007 09:33

I'm not sure how much effort this would take on your part as I've not seen your site / code, but my solution would be to place the original property image as a background image in the div.

Once it's sold, place the 'SOLD' image inside the div.

Hope that helps.

**Dan Schulz** · Sep 1, 2007 10:01

You need to assign a z-index to the image. However, in this case, I'd add "sold" to the image itself so that those without CSS know the home has been sold (since it's a content image, rather than a presentational one).

**chrissie76** · Sep 1, 2007 13:04

thanks for your reply, i cant put the property image as a background image as it is db generated code, and i already have a drop shadow background on it.

i have set the z-index, the image sits on top but the container stays way too big, the code that i am referring to

Code HTML4Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
<!--
#options{
	width:100%;
	margin:auto;
	display:inline-table;
border:1px solid #CCCCCC;
display:block;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #999999;
	text-decoration: none;
 
}
	img.sold {
	position:relative;
	top:200px; 
	right:0px;
	border:none;
	z-index:1;
	background:none;}
 
.details-shadow {
  background: url(/images/shadow.png) no-repeat bottom right !important;
  background: url(/images/shadow.jpg) no-repeat bottom right;
  margin: 10px 0 0 0px !important;
  margin: 10px 0 0 5px;
 float:left;
 width:561px;
 margin-left:0px; 
 border:thin #000000 solid;
  }
.details-shadow img {
  display: block;
  position: relative;
  background-color: #fff;
  border: 1px solid #CCCCCC;
  margin: -6px 6px 6px -6px;
  padding: 7px;
  } 
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Relative Positioning</title>
</head>
 
<body>
<div id="options">
 
<div class='details-shadow'><img src ="images/soldbanner.png" class="sold"/><img src="images/bluebox.png"/></a></div>
</div>
</body>
</html>

for reference the blue box is about 600px by 500 and the banner is about 100 by 100px;
to see the code in action:
http://www.aglobalaudience.com/test/
any help is appreciated.
i really need the img-shadow div to collapse back down and then i think i have it..
cheers
chrissie

**all4nerds** · Sep 1, 2007 13:36

Hello

Give IE layout and clear the floats in FF OP , 100% width's cant have left right borders, position relative on images ? for overlay ? z-index ? .details-shadow img, forces to cascade css for class sold

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head>
<style type="text/css">

#options{
margin:auto;
border:1px solid #CCCCCC;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
color: #999999;
min-height:1%;
overflow:hidden;
}
* html #options{height:1%;}

.details-shadow .sold{
position:absolute;
top:200px;
right:0px;
border:none;
margin:0;
}

.details-shadow {
position:relative;
background: url(/images/shadow.jpg) no-repeat bottom right;
margin: 10px 0 0 0px;
float:left;
width:561px;
border:thin #000000 solid;
}

.details-shadow img {
background: #fff;
border:1px solid #CCCCCC;
margin: -6px 6px 6px -6px;
padding: 7px;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Relative Positioning</title>
</head>

<body>
<div id="options">

<div class='details-shadow'><img src ="images/soldbanner.png" class="sold"/><img src="images/bluebox.png"/></a></div>
</div>
</body>

</html>

**Dan Schulz** · Sep 1, 2007 13:38

They can have them if you apply negative margins to the left and right sides (enough to accomodate for the borders), but that's beside the point.

Off Topic:

Ben, thank you for covering me here - I'm not at home right now, and will be reinstalling XP either tonight or tomorrow. Enjoy your weekend, I know I'm not.

**chrissie76** · Sep 1, 2007 13:42

Dear All4nerds,
Thanks very much for your help, I have been trying to hack away at this for 2 days and it has been driving me crazy!
it looks like i can fix it up how i want it now.
thanks again, Chrissie76

**all4nerds** · Sep 1, 2007 13:54

Hello

Yes Dan you are right , but it would hardly be useful here, and it needs 2 or 3 parameters, maintenance ( 100% width margin L R) and kills the best property of a div that of auto-width

**Dan Schulz** · Sep 1, 2007 13:58

Oh yeah, I know. That's why I said it was beside the point. It can be done, but it's not necessarily appropriate in all situations.

User Tag List

Thread: how can i overlay one image on top of another using css realtive positioning

Thread Tools

Display

how can i overlay one image on top of another using css realtive positioning

Thanks!

Bookmarks

Bookmarks

Posting Permissions