aligning the background image with a .swf header

[bongodog]

this is probably an easy task for someone who knows what they're doing... i'm a noob at web design so could use some advice.

having trouble getting the BG image to align with the Flash header...

when i try this code:

background-position: center center

the BG image is centered horizontally but crammed up top underneath the header

so i tired this:

background-position: horizontal center

and oddly - the BG image is moved down the appropriate amount - but now is aligned on the left and not centered horizontally at all...

what gives?

adding the following line changes nothing:

background-position: vertical center

here is the page as it currently looks:
bongodogdesigns.com/freestyle/main2.html

I appreciate any input...
Cheers!
=D

[htmlbasictutor]

CSS background-position Property

...Note: For this to work in Firefox and Opera, the background-attachment property must be set to "fixed"....

Note: Internet Explorer does not support the property value "inherit"....

The property values are further down the linked page above.

I would think that setting the property values to specific values would solve your problem.

[bongodog]

thanks for your quick reply...

setting the background-attachemnt to 'fixed" did indeed align the image horizontally.

however, now my div boxes are all out of whack...

the image lines up pretty close in explorer but there is a large gap between the header and image in firefox.

I would think that adding specific values for the alignment properties would cause discrepencies between different screen resolutions and wreak all kinds of havoc.

Any more advice?

[Costin Trifan]

IE8 and FF3.5 display your page 99% the same. Can you post a screenshot of your web page?

[bongodog]

actually, i see now that the mis-alignment of the div boxes, and background image with the header are all relative to the browser window - see this example:

bongodogdesigns.com/freestyle/main3.html

so how is it possible to center all three elements (.swg header, BG image, and html template) and align them properly???

is it recommended to use tables?

thanks in advance for your advice!

=D

[Costin Trifan]

you use absolute positioning to align your layout, and that's a very bad practice. You can actually see it in action in IE. FF displays it centered alright, though.
So, you should better start redesign your page and use a fluid layout; use margins and paddings to separate your divs and you will be good to go in no time.

[htmlbasictutor]

The first step to troubleshooting is to validate your code so you eliminate that possible problem. You have a few coding issues that could be contributing to your problem.

After you get those errors sorted out, then divide your design into containers (divs) as Costin said.

Manipulate the background image with CSS. Info provided in my previous post.

[bongodog]

thanks for the tips, guys!

That's so cool - I didn't know you could layer DIV boxes on top of eachother!

All I had to do to get the background and text content to line up center and keep from shifting around was put the BG image in a DIV box...

I did the same with my .swf header - but it's not showing up inside the DIV box (just getting the dreaded white square...)

I'm gonna google it right now but maybe you have an easy fix for me???

thanks again!
=D

[bongodog]

never mind about the .swf header not showing up -my error (inserted the wrong file)

works great now - thanks everybody!