Stretch background image/color out of the div

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);


}

[B].s2[/B]{
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:

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

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

[B]body[/B]{

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

}

[B]html[/B]{

overflow-x:hidden;
}



Help me out please, i am badly stuck :frowning:

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.

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

http://pageaffairs.com/code-archive/full-width-bands/floated-columns.html

Thanks Ralph :slight_smile: