PDA

View Full Version : Position Image on top of another?



noneforit
Jun 7th, 2009, 10:26 PM
Hello

Live site is:

www.noneforit.com

I need the login gif to sit ontop of the main background gif but i cant seem to get it to do it.

Im sure you can see where the login button is meant to go......below the vertical bottom line on the background gif

Any ideas?

Thanks

Kristofa
Jun 7th, 2009, 11:49 PM
Use the position:relative (http://www.w3schools.com/CSS/pr_class_position.asp) CSS property on the <div id="loginimg"> and fiddle around with different percentage values till you get it in the correct position.

It seems a strange way of doing it though, does the login image have to be the background image of a div?? Why not just make it a normal image, and position that...

noneforit
Jun 8th, 2009, 08:09 AM
I have tried position:relative on both divs, individually and together but it still refuses to work....I have tried margins, padding, top, vertical-align but the button refuses to sit on top of the image.

Basically I have a background image and will have two link buttons (gif images) which will sit on top of the background image......I have seen it done often before?

SB65
Jun 8th, 2009, 09:15 AM
Well, you could do it by applying absolute positioning to #loginimg, something like:


#loginimg {
background-image:url(images/Login%20copy.gif);
background-repeat:no-repeat;
height:31px;
margin:auto;
position:absolute;
left:630px;
top:420px;
width:98px;
}

Another alternative might be to get rid of #backgroundimg, instead setting that image as the background on body, and then positioning the Login image with margins as normal.

noneforit
Jun 8th, 2009, 09:27 AM
Works great....Thank You :)

noneforit
Jun 8th, 2009, 10:30 PM
hmmmmm.....works until I change the screen resolution at which time the loginimg moves?

SB65
Jun 9th, 2009, 07:40 AM
Morning..

I thought that yesterday you had the #loginimg nested within #backgroundimg - so that #loginimg was positioned absolutely within it. Anyway if you make this change and centre #backgroundimg with a fixed width that should give you what you want:


#backgroundimg {
background-image:url(images/MainBack%20copy.gif);
background-position:center center;
background-repeat:no-repeat;
height:auto;
margin:0 auto;
margin-left:auto;
min-height:600px;
position:relative;
width:700px;
z-index:1;
}

#loginimg {main.css (line 24)
background-image:url(images/Login%20copy.gif);
background-repeat:no-repeat;
height:31px;
left:350px;
position:absolute;
top:420px;
width:98px;
z-index:3;
}

noneforit
Jun 9th, 2009, 08:01 AM
Hmmm....have made the change to the CSS that you suggested above and now I dont see the loginimg on the page............unless im losing the plot?

Maybe its sitting behind the backgroundimg

SB65
Jun 9th, 2009, 09:00 AM
You seem to have lost the background image from #loginimg...

Also, #loginimg needs to be nested within #backgroundimg as above.

noneforit
Jun 9th, 2009, 09:15 AM
Working.....very much appreciated :)