• 100% Div’s background image is not 100%..?

  Date: Sep 7, 2010  |  Categories: Css  |  Written By: Mike Ballan  

Ok so here is the problem i was having, I needed to have a background image for my footer and it needed to be 100% width of the screen sounds easy yes? Well it sort of was untill i got to the testing phase and noticed that when i resized my browser to say half my screen the scrolled right the background wasnt there.

#div 	{
 	margin:0;
 	padding:0;
 	width:100%;
 	background:url("bg-01.jpg") left bottom repeat-x;
 	text-align:left;
}

Now i searched high and low to find a solution to this problem and then just as i was going to give up i found this simple fix.

#div 	{
 	margin:0;
 	padding:0;
 	min-width:960px;
 	background:url("/bg-01.jpg") left bottom repeat-x;
 	text-align:left;
}

Yes by simply replacing the width:100%; with min-width:960px; it fixes the problem..!