Tutorials

Table of contents
Close

How to Create a Full Width Section with Background

The first step in creating full width sections of your website is to confirm that the body of your site is full width.  If the body or any of the section containers are constrained to a fixed or maximum width you will not be able to achieve this look.  

Step 1:

Group the modules you wish to add the background to. It is helpful to give groups a name the correlates to the content or style associated with it.

Step 2:

Group them again.

Your groups should look something like this.

full-width-background

Step 3:

Assign the class page-center to the inner group, in this case the "call-us" group.

Step 4:

Assign the class full-width-bg to the outter group, in this case the "call-us-wrapper" group. You can add a class, by clicking the gear icon on the group and choosing Edit CSS. Learn more.

Step 5:

Add the following code to your CSS file in the code editor section of the Template Builder. Stylesheets are located in the Coded Files section of Design Manager.

Create or locate your CSS file and add the following CSS.

 .page-center{
              max-width: 980px;
              margin: 0 auto!important;
              float: none!important;
          }

This code will force the inner group to be centered within a maximum width. You can change the max-width to what ever width works for your site design.

Step 6:

It is time to add the background to the group.  You can make it a color, or use a background image.  If using an image, make sure that the file size is small so that it does not slow down the load time of the page.  

If using a color, add the following code to your CSS file, substituting "#ddd" with the hex color you wish to set the background:

.full-width-bg{
          background:#ddd;
     }

If using a small repeatable file, add the following code to your CSS file:

.full-width-bg{
               background: url('your image url here') repeat;
}