Stretch background image/color out of the div

[moneysharma]

i have a 960 container.

http://moneyzzsharma.site90.net/

what i had done:

container{
1st outerwrapper(named s1) for 1st div and then 1st div is given width:960 and margin center. Outerwrapper is given margin:0px -300px;

this same thing is applied to the 2nd outerwrapper(named "s2")(the one having FOODIE logo).

ALSO HTML{OVERFLOW-X:HIDDEN;}

it works fine on pc which is having more than 960px width. But on Cellphone(NOT IN OPERA BROWSER) extra right portion is seen. what should i do to make it correct?
coding of 1stouterwrapper(s1) and 2nd outer wrapper(s2) is :

.s1{
z-index:-4;
margin:0px -300px;
height:55px;
background-image:url(images/topbg.png);


}

.s2{
z-index:-5;
margin:-10px -300px;
height:140px;
background-image:url(images/bluebg.jpg);

}

darkbluecontent is the inner container of s1
and lightbluecontent is the inner container of s2

their coding are:

.darkbluecontent{
margin:0 auto;
position:relative;
top:10px;
width:960px;
height:32px;
}

.lightbluecontent{
margin:0px auto;
	clear:left;
	position:relative;
top:4px;
width:960px;
height:136px;
}

body{

width:100%;
	margin:0;
	padding:0;
	position:relative;
background-image:url(images/wholebg.jpg);
z-index:0;
/*z-index:-4; */

}

html{

overflow-x:hidden;
}

Help me out please, i am badly stuck

[PicnicTutorials]

Prob the overflow-x if I understand you. Try just overflow

[moneysharma]

Prob the overflow-x if I understand you. Try just overflow

it will never work coz if
html{
overflow:hidden}

will be used then no scroll option will come and its not of any use.

[ralph.m]

For this kind of layout, you are better off (IMO) just creating full width bands as described here:

http://pageaffairs.com/code-archive/...d-columns.html

[moneysharma]

For this kind of layout, you are better off (IMO) just creating full width bands as described here:

http://pageaffairs.com/code-archive/...d-columns.html

Thanks Ralph