How to fix the background image to the wrapper?

Hi,

I have a problem with the design of a wallpaper which is for advertising. I would like to set the banner to fit the wrapper and apply some padding. For example 140px left and 140px right.
The problem is that every time I check the website with different resolution, the background image floats to the left. I would like to float with the wrapper, according to the resolution of the viewers.

Here's what I have:

For wrapper:

position: relative;
width: 920px;
margin: 0 auto;
margin-left: 0 auto;
margin-right: 0 auto;
padding: 0;
border-top: 1px solid #dadada;
background: none repeat scroll 0 0 #FFFFFF;
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);

For the branding:

z-index: 0;
background: no-repeat scroll center top 0px transparent;
position: fixed;
padding-left: 56px;
margin: auto;


How to fix the branding banner ( wallpaper ) to the wrapper and when wrapper moves, the branding banner moves with the wrapper?

Here's a demo of what I'm going to create: AdOcean Demo http://demo.adocean-global.com/main.php?x=BI&y=Background%20Image
Thanks.

 

The background image has nothing to do with resolution, container size or anything else in the normal flow, it is is just decoration. If you want it to be responsive then you need to use media queries or scripting. Or do a mor logical design where the image is a component of the design instead of just passive decoration that you want to stick things on.

 

I solved the problem by using a different <div> and centering it, then coding the .css file with the W and H at 100%. Position is set to absolute. Now, it works.