Putting one Image on top of another

Hi.

I'm trying to finish a web page, where I can have a background image, and another image on top of it.

I've used some CSS, and I tried setting the background image as the background of a table, and then making a table within that for the image I want on top, but I'm having a hard time getting things lined up.

I need to keep the images separate, because I want people to be able to download the image on top separately.

Is there any easy way to do this in Dreamweaver?

Or is there a way to do this in Fireworks, and keep the images separate?

Thanks!!

Putting one Image on top of another

You can do this without a problem with a div layout. Forget about tables. Create a containing div which will be your page and you add divs inside that containing div. Set a background image to the containing div and then do the same with one of the inside divs. You can do that with css. Here is a tutorial to give you an idea.

Putting one Image on top of another

I ended up using a background image on the whole page, and using ''background-position:center top;'' to center it.

The onlty problem now is, I need to put the image on top of it in a specific place.

It basically has to be centered horizontally, and in a specific position (number of pixels) down vertically.

How is the best way to do this?

Thanks.

can you paste your code?

I'm using this for the background image:

%26lt;style type=''text/css''%26gt;

%26lt;!--

body {

background-image: url(Images/br.png);

background-repeat: no-repeat;

background-position:center top;

background-color: #000;

}

--%26gt;

I'm just not sure how to put the front image in a specific spot vertically, and center it horizontally...

Ok well you dont have a web page yet. You only have an internal css sheet. You need this for it to work

%26lt;!DOCTYPE html PUBLIC ''-//W3C//DTD XHTML 1.0 Transitional//EN'' ''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd''%26gt;
%26lt;html xmlns=''http://www.w3.org/1999/xhtml''%26gt;
%26lt;head%26gt;
%26lt;meta http-equiv=''Content-Type'' content=''text/html; charset=utf-8'' /%26gt;
%26lt;title%26gt;Untitled Document%26lt;/title%26gt;

%26lt;style type=''text/css''%26gt;

%26lt;!--

body {

background-image: url(Images/br.png);

background-repeat: no-repeat;

background-position:center top;

background-color: #000;

}

#imagediv {

background-image:url(image.gif);

}

--%26gt;

%26lt;/head%26gt;

%26lt;body%26gt;

%26lt;div id=''imagediv''%26gt;%26lt;/div%26gt;

%26lt;/body%26gt;
%26lt;/html%26gt;

Here is a tutorial on aligning divs

Sorry...

I did have a web page - I was just copying those lines of code.

I know I can alighn a div - Format -%26gt; Align works for that.

I just though there is probably a way to do that with CSS, and if I'm using CSS anyway, why not find out how.

But I still don't know hoe to position the image at a specific position vertically...

I basically need to position it in a specific position relative to the background, centered (which I can do by alighing the div) but at a set amount of pixels down, so it is in the right place...

How can I do this?

Thanks!!

OK, I think I figured it out...

I used this CSS code:

{

position: relative; top: 270px;

margin-left: auto;

margin-right: auto;

display: block;

}聽聽聽聽聽聽聽聽聽

So it works now?

Yup...

Thanks for the help.

I found most of the info here:

http://www.elated.com/articles/css-positioning/

One more question -

Is there any way to insert a hotspot over a background image?

I need to add a link to an area in the background image...

Thanks!

ytlevine wrote:

One more question -

Is there any way to insert a hotspot over a background image?

I just figured that out, and did that.

Only funny thing -

I used the same style css to put the image exactly where I needed it, but it seemed like the number of pixels started counting from after the last image...

Can anyone confirm that?

Thanks.

try taking out relative from your style sheet for the new div

But won't that make that the image won't move when the user scrolls the page?

I've checked this thread a few times now and I'm sure i'ts not my eyes even if it is the early hours of the morning here, but I have not once seen a link to the problem pages.

Unless you provide the code in full (html and css) - or even better upload all the working files to a remote site and provide the link, everything really is only a guessing game聽 :-)

Proving a link, allows people to see the html, the css and all the imagery that makes up the site, by just posting code, we don't get to all of that interacting together to see what may be causing the problems.

--

Nadia

Adobe庐 Community Expert : Dreamweaver

http://www.perrelink.com.au

--------------------------------------------------------------------------

Unique CSS Templates | Tutorials | SEO Articles

http://www.DreamweaverResources.com

--------------------------------------------------------------------------

http://twitter.com/nadiap

Sorry, read your message wrong.

Relative should move it relative to its starting position. If you move it left:20px;, it should move left of the element 20px. Just an example