Header and Footer Backgrounds Not Filling Browser or Mobile Device Window

I encountered this problem during our work on the GroundSwell site.  The header and footer both feature full browser-width background fills that are a different color from the body background.  The header also has a background image that is being repeated across the x axis to fill the entire width of the browser.  Everything looked as expected during initial development as you can see below.

Groundswell Website Header

However, when the browser was resized to a width that was smaller than the content or viewed on a mobile device, the header and footer backgrounds would not continue across the full width of the display.

Groundswell Website Header with Messed Up Background Fill

The solution is to force a minimum width of the site body using the “min-width” CSS command as shown below:

body { min-width: 1012px; }

And, voila, the background fill is now behaving as desired.

Groundswell Website Header Fixed Background Fill

The value of 1012px used in the example is the width of the content wrapper for the GroundSwell site.  The min-width value will be unique to a particular site based on its page content width.

Hope this information proves useful and saves you hours of frustration, less headaches and fewer dents in the walls ;)

About Charlie Thompson

Charlie is co-founder and president of GroundSwell Web Designs. When he's not evaluating tools, building sites, assisting clients, or verbally threatening computers you can usually find him outside wondering what that big bright object is in the sky. You can follow him on Linkedin. See all posts by Charlie.