Get div background to expand outside div without affecting page width

[blizzy]

Hi,

I have a wordpress site that I want to have center aligned and support different resolutions etc.
As you can see on the site (link), there's something wrong with my div backgrounds since they don't fill up the whole window.
What i want to achieve is (link) where you can change the window size and the whole page follows and stays centered, but the top background expands "infinitely" without affecting the rest of the page, scrollbars etc.

This is a codesnippet from the page:

<div id="superwrapper">
	<div id="container">
		<div id="wrapper">
			<div id="header">
				<?php.........

and this is a part of the stylesheet:

#superwrapper {
	background:url(images/footer_bottom.png) repeat-x 0 100%;
	position:relative;
}

#container {
	margin: 0 0 0 10px;
}
#wrapper {
	margin: 0 auto;
	width:1002px;
}


#header {
	width:1002px;
	height:142px;
	margin: 0 auto;
	padding: 0 0 0 5px;
	background:url(http://www.jfilund.se/images/logoheader.png) no-repeat; /*This is the top logo that gets cropped*/
	z-index:-1;
}

From what I understand there's a problem with setting a fixed width (1002px) because that means it will crop the rest, but if I set it to something flexible, like 100% my margin: 0 auto doesn't seem to work and everything is stuck to the left...
I got it the size to work once, and it took up the whole window regardless of the browser size, but then when I reduced the window size and scrolled to the right the image was cropped according to the browser size.

So my scenarios are:
-Fixed width to 1002px, works with small window put 1002+ will crop
-100% width works with large window but small windows that require horizontal scroll will crop image to window size (go to (link), shrink window, scroll right and you see what I mean!).

How can I make the top background image fit both a small and a large window, where the background doesn't get cropped?

 

[blizzy]

To simplify my problem I've started all over with a blank page just to try out my background issue.
I think i've narrowed down my question quite a bit to:
How do you make a div align to the center with a minimum width but still allowing overflow (background image) to the right on browser window change?

Basically, I want this image to be centralized to 1000px (real image width is 1500px) according to browser width, but if browser window is resized I want to image to "grow" to the right until browser window is larger than the acctual image size (1500px+)

 

[EverplexMedia]

You need to put the image as a background image outside of the div which you want the image to be larger than.

Then for the div you want to center, the code is <div align="center">CONTENT</div>

To "grow" an image, you need to use javascript.

You cannot "overflow", a background image outside of the div which it is located in. You can "overflow" an image placed within a div (not a background image), but this is generally bad practice.

 

[PixelPusher]

...

You cannot "overflow", a background image outside of the div which it is located in. You can "overflow" an image placed within a div (not a background image), but this is generally bad practice.

Exactly! if you want to use a background image that is larger than the intended div, you will need to wrap it with another element.

 

[blizzy]

Exactly! if you want to use a background image that is larger than the intended div, you will need to wrap it with another element.

Ok. Can you give me some example with code please? Not sure i'm following you completely.

 

[PixelPusher]

Ok. Can you give me some example with code please? Not sure i'm following you completely.

It quite simple really,
If you had an image that was 200x200 pixels but the internal content was to be only 150x150 you would need to have two elements. One that holds the image and one that holds the content.

<div class="bgimage">
    <div>
        "Content Holder"
   </div>
</div>