View Full Version : Hey all - what is my oversight on this code?

Mar 31st, 2011, 06:08 AM
Hey everyone!

I am trying to center both form.png and logo.png, with logo.png being ever so slightly atop form.png in my css file. I made both background png images with absolute positioning so as to get the right effect, but for some reason my logo is in the right location yet my form sticks to the top left.

Here is my code:

width: 875px;
height: 350px;
background: url(images/form.png) 0 0 no-repeat;
position: absolute;
padding: 8% 0 0 25%;
z-index: 1;

#main form {
width: 1014px;
height: 228px;
background: url(images/logo.png) 0 0 no-repeat;
position: absolute;
padding: 9% 0 0 25%;
z-index: 2;

I know my form wraps around my main div but I wouldn't think it should create this issue. Thanks for any help!

Mar 31st, 2011, 06:22 AM
Because you've told it to be in the top left? :P

background: url(images/logo.png) 0 0 no-repeat;

0 0 would put in the top left corner. Depending on size maybe make that first 0, 300px?

Mar 31st, 2011, 06:37 AM
ohhh! but would that not restrict the dimensions of my image associated with the specified width and height of 875 by 350 and cut it off? Sorry I seem to have confused myself =x

Mar 31st, 2011, 08:54 AM
Mmm i'm not sure what you mean. All those numbers to is position the image. It doesn't change the width or heights of anything. You can also use words like "top", "right", "center". Just fiddle around with it.

//Align horizontal center
background: url(images/logo.png) center top no-repeat;

//or 200 pixels right, 10pixels from the top
background: url(images/logo.png) 200px 10px no-repeat;

None of it actually effects element sizes in anyway. If your having problems with over lapping elements, that's different all together.