background and header images pushing down the page

almost done with the myriad of issues switching over to the new 1.3.1 store, just have a few more questions. for some reason, the background of https://www.FraggleReef.com/test is pushing the entire store down until the bottom of the background image, it works at https://www.FraggleReef.com/zen though, so I'm kind of confused. I changed the header and background images to png in an effort to make them transparent, and then layer the page over them, but then I realized hey, I have no idea how to make them transparent... also, try as I might, I can't seem to make the two images line up, it seems that the header is being padded down into the background image, whereas they line up on /zen, on the /test version they're both kind of... messed up
thanks much in advance!

Png graphics do not work in Internet Explorer. Since 50-75% of users have IE suggest you use gif instead. Use your graphics editor to set the transparency of the gif.

#logoWrapper {
width:800px;
height:336px;
background-image:url(../images/header_bg.png);
background-repeat:no-repeat;

}

is likely your problem. This sets your image as a logo and not a background image.

There are some other CSS wizards that will have to help you get everything else setup like you want it.

you don't need to set a height and width for a background image.

thanks much for the replies Sermonzone and polarduality, unfortunately when I remove the height and width from the background image it ceases to exist, so I'm thinking that what I'm calling the background image in the logowrapper area is just that little box that stays up at the top, whereas I just need an image to be displayed behind the general shopping area, can anyone clue me into this one, or am I way off?...

I think you want your background image to go in your body tag rather than your header tag. If you put it in the logowrapper it will like just blow up the header whereas in the body tag it will let the header and sideboxes float over the top.

http://www.w3schools.com/css/css_reference.asp has the css settings for background... settings.

My CSS is limited so I could be all wet.

when you specify the height and width for logoWrapper you are telling that DIV to be that specific size. The other div's will follow below that.

Try adding the backround image to the BODY section of the stylesheet. Don't specify a width or height.

body
{
background-image: url(../images/header_bg.png);
background-repeat: no-repeat;
background-position: 0% 0%
}

play with the position of the background.
The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%.

polarduality, Sermonzone, thanks much again, very much appreciated, that fixed the issue for sure!