Header Background

[kitster79]

Hi,

 

Can someone help me figure out the easiest way to change my header so that the background image hides under the left-hand side of the browser window when the window is made small/narrow. In other words so the SnackZone logo sits flush to the left hand side of the window when the the browser is re-sized. I know I am probably describing my issue poorly! I have a background image on repeat-x on the body tag, and my #header div has a 1200px wide background image - since my header is sized as 1200px wide, this width of the site is stuck to that width - therefore when people have smaller screens and cannot view the browser at 1200px wide, the page looks off center and too much to the right because the header div is not allowing it to slip under the left side of the browser until it hits the logo.

 

DOES ANY OF THIS MAKE SENSE? How do adjust the structure so that I can achieve this?

 

Here is the URL to the page in progress...

 

http://vojodesign.com/proofs/snackZone/

 

Thanks in advance.

[falkencreative]

Take a look at this:

 

http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

 

basically, you'll need to either include it as a background image in your

, or add a wrapper div that goes around your entire site that has a 100% width and make it a background image there instead (with positioning "top center").

[LSW]

I would compress the banner, the man and logo, the candy bars etc all onto one layer with the curved lines and trim it as small as possible to those curved lines. Maybe move them closer together, so your target is say 780 pixels big.

 

Then take the red and black section and cut it down to a strip of say 10 - 50px wide and place it as the repeating background. so it tiles across.

 

Now take the logo section and place it as a image above that. Center it in the header box and give it a margin of Margin: 0 auto; , this way it will stay centered and adjust itself to the center of the available space and is always centered until the resolution is under 800 pixels wide, which is now fairly rare. Meanwhile it blends in with the background under it.

 

As for the menu, you could make it part of the image and use a CSS Image map to make the links. If the hot spots are based on the image size, then the image and hot spot will always match. The downside to this is you have to recreate the image every time you wish to add a new menu element or edit them. Be sure to keep an original version and always work on copies. For the image map see: Night of the image map

[kitster79]

Thanks for your help guys!