How To Add Full Width Backgrounds

For a long time, I relied too heavily on background images for creating a website where the background rows stretched from one side of the monitor to the other (like this website). For a while this worked, but what happens when you end up with one too many lines of text? I end up with hours of frustration trying to figure out how to fix the problem without removing information; it’s just not a good solution because it’s too rigid.

I started using a CSS Framework and found that I could recreate this effect without the image to make a background. You wouldn’t have to do this with Bootstrap, which is what I use, but for this tutorial, I’ll be using Bootstrap oriented HTML and CSS. You can find Bootstrap at http://getbootstrap.com/ .

Step 1

The first thing we need to do is write the correct HTML. Now, in Bootstrap, there are a few classes we have to know about:

1. .container – This class sets a consistent width according to the current device screensize.
2. .row – This class sets some margins and clearfixes, so our columns can be force cleared.
3. .col-{xs|sm|md|lg}-12 – This class sets some padding and creates a 1 column layout.

From this, let’s put together some markup that will have auto margins.

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <p>This is where my content lives!</p>
    </div>
  </div>
</div>

This markup will center the container for the content. The content itself will not be center aligned, but the container around the content will be in the center of the screen.

Step 2

At first glance, my thought was to just put the background on the container element. This doesn’t work though for one reason – this class is centered using margin and that CSS Property is outside of the CSS Box, so the background wouldn’t apply to the areas within the margin.

The solution is rather simple – just wrap the container element in another div and style that element. Example:

<div class="my-class">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <p>This is where my content lives!</p>
      </div>
    </div>
  </div>
</div>

By adding a background property to .my-class, you end up styling the whole row contained within .my-class. By doing this multiple times, you can get an effect similar to the effect on this site. Take a look by clicking “View Source” and you’ll see how I use this to solve the problem that I mentioned above.