Css background not taking full width when the browser size is reduced

HTML & CSS
1

Hi,

I have some issue with css background. Please check the following scenario:

Take www.sitepoint.com website. Check the full width background on the footer (the black one with copyright info). Now reduce the browser size so that horizontal scroll appears (any browser, though I checked in firefox). Scroll horizontally. Notice that the footer is cut and not extending to full width. This problem is also there in the header portion of http://designfestival.com/ website. Repeat the above process and note that the black background on header get cut. Is there any solution for this?

I believe this situation happens when we use full width background on a fixed width, centered layout.

Note: Since I have the same issue with my websites, and cannot give the url right now, I have used the sitepoint website address. Kindly help.

Regards
Jayakumar

2

The way to deal with that is to give a min-width to the element with a background on it. If you have a 100% wide div with the background, for example, and an inner, content div of—say—width 960px, then give the outer div a min-width of 960px and the problem will go away.

3

Hi ralph.m,

Thanks! Its working fine now. But I would like to know whether this is a bug? What is really happening when we do not provide a min-width?

4

No, not a bug. It’s just that, when you narrow the browser like that, it fills in the background to fill the visible area, and it’s not able to redraw that background if you scroll to the right. So you just have to stop the browser from allowing the background area to resize like that.

5

Thanks for the info.