PDA

View Full Version : put an image on the another image

joonstar
04-02-2004, 10:32 AM
I have two gif files. they are named top_level.gif and bottom_level.gif.
top_level.gif includes some transparent area.

I can make the images shown with the following code.


<img src="top_level.gif" width="100" height="100">

<img src="bottom_level.gif" width="100" height="100">


I like to put bottom_level.gif first.
And
I like to put top_level.gif on the same position of the bottom_level.gif exactly.

Can I do it?

Thanks in Advance
glenngv
04-02-2004, 10:37 AM
try:

<span style="background-image:url(bottom_level.gif)"><img src="top_level.gif" /></span>

or

<head>
<style type="text/css">
.overlay {
background-image:url(bottom_level.gif);
}
</style>
</head>
...
<span class="overlay"><img src="top_level.gif" /></span>
joonstar
04-02-2004, 02:39 PM
How can I put "width=100" and "height=100"?

The following code seems doesn't work.

<span style="background-image:url(bottom_level.gif width="100" height="100")"><img src="top_level.gif" width="100" and height="100/></span>
Roy Sinclair
04-02-2004, 03:15 PM
Style sheets don't use a property="value" format for starters.

Are both images exactly 100 by 100 or are you expecting the browser to resize them? This is important, if they're 100 by 100 then the Glennv's code should work, otherwise you've got to use more complicated code (simpler to fix the size of the images).
joonstar
04-02-2004, 07:58 PM
Top_level.gif is exactly 100*100. it is made by the site owner.
But
Bottom_level.gif is not 100*100. it is posted by the user.
I like to resize bottom_level.gif.
Afrow UK
04-02-2004, 08:24 PM
There is no way in CSS to resize a background image (currently).

-Stu
Roy Sinclair
04-02-2004, 09:14 PM
There is no way in CSS to resize a background image (currently).

-Stu

Which means another way of placing one image directly over another will be needed then.

Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Testing</title>
<style type="text/css">
#outer
{
height: 100px;
width: 100px;
overflow: hidden;
}
#under
{
width: 100px;
height: 100px;
}
#over
{
position: relative;
top: -100px;
left: 0px;
height:100px;
width: 100px;
}
img
{
border: 0;
}
</style>
</head>
<body>
<div id="outer">
<div id="under">
<img src="bottom_level.gif" width="100" height="100" />
</div>
<div id="over">
<img src="top_level.gif" width="100" height="100" />
</div>
</div>
</body>
</html>