Search the Support Center

How to make sections of a web page with full-width backgrounds

One of the most frequent requests we get from web designers is to add the ability to create full-width sections of a web page that can have a different background on it. This would allow you to create distinctly different areas or sections of a website in a number of horizontal bands which is great for relaying blocks of information or that can easily be combined with anchor links to create one page websites.


While our development team is hard at work in creating a built-in solution for creating these sections on Jimdo web pages, we want to provide an advanced solution for anyone willing to spend a little time adding some custom code to create this visual effect.


I have created a sample website that demonstrates how to create full-width sections with three different types of backgrounds.  You can see the example at http://brentfullwidth.jimdo.com/.


So, how can you achieve this look on your website?



Step 1: Create a Columns Element

In order to make a "section" on your website, start by placing all the content that you want to appear in the section into a single Columns element.  Even if you don't want any side-by-side elements, you can just create Columns element with just one column in it.  We'll need part of the code that the Jimdo system inserts for Columns to make this work.


For best results, I like to put some Spacing elements above and below my content, but still within the Columns element.  These spacers will essentially become the padding on the section allowing the background to extend a bit above and below the content while it stretches all the way across the browser window.


Step 2: Identify the ID of the Columns element 

Since we will be working with some CSS code and JavaScript, we will need a way to identify the block of content that we want to make into a section.  To do this, open your website in view mode.  I like to do this by right-clicking the "view" link and opening it a separate tab so you can have both the edit and view versions open at the same time.


Now we need to inspect the code.  The easiest way to do this is by using Google Chrome to view the website, then right-click on the content that should be in the section.  Select "inspect element."  


This will launch Developer Tools.  Use this to look through the source code in the bottom left panel.  Rolling over different pieces of code will highlight different parts of the website in the web preview panel at the top of your browser window. Find the div that highlights the entire columns element in the code.  Next, copy the id from that div and paste it somewhere to access later.  It will look something like: 


cc-m-12219240478


Note:

For a good introduction to using Google Chrome's Developer Tools, please see the How to modify Jimdo templates with CSS tutorial.

Step 3: Select your background color or image

If you want to make the background a color, you will need to identify the hex value for that color.  You can use a free online tool like http://www.colorpicker.com/ to find the 6-digit code.  It will look something like:


#A3C9A4


Make sure to copy and paste that code somewhere safe as you will need it in a later step.



If you want to use an image as the background of your section, you will need to first select the right image.  For best results you will want an image that has a file size below 400kb, yet is rather large.  We also recommend using an image that is at least 1900pixels wide and at least as tall as you image the section will be.  Only .jpg, .png, or .gif are acceptable formats to use, and make sure the image is saved at 72dpi.


With your image selected, we now need to upload it to your website.  To do this, go back to the edit mode view of your website.  Since Jimdo does not have an FTP or uploads area, we need to do a little bit of a hack to trick the system into hosting our images.  Start by hovering over the navigation menu and clicking on "Edit Navigation."  Now create a new page of the website called "assets" and make it hidden by clicking the eyeball icon to the right of the new page on the list. 


After creating the new page, save and navigate to the assets page.  Finally, use the File Download element to upload your background image.  


Note:

Since we are not using the photo, photo gallery, or background feature of Jimdo, your photo will not be automatically optimized for the web. Please ensure that it is properly compressed (under 400kb).

At this point we have uploaded the background image that we want to use, but we do not know how to access it to use it in code.  To find the exact url of the image, toggle to the view mode version of the assets page by clicking on the view link in the bottom right hand corner. Next, right-click on the download button and select "copy link address."  Finally, paste this somewhere so you can access it later.


Step 4: Add the JavaScript

Note:

Before proceeding, please be sure you've loaded the jQuery library by copying the following code and pasting it in the website head (Settings > Website > Edit Head):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"> </script>

At this point you have all the information you need to begin adding the custom Javascript and CSS that will add the full-width section to your website.

 

While in edit mode, go to Settings->Edit Head

 

Begin by copying and pasting the following code into the code field:

 

<script type="text/javascript">

//<![CDATA[

    $(document).ready(function() {

 

/* This is the Columns Element that we are converting - identify it here */

        $( "#cc-m-12285023130" ).wrap( "<div id='section1' />" ); 

 

    }); 

 

//]]>

</script>

 

Now replace cc-m-12285023130 with the id title that save from step 2.  Make sure to keep the # symbol in place.

 

Step 5: Add the CSS

Now you need paste one of the following blocks of code below the </script> tag in the Settings->Edit Head area. 

 

Solid color background:

If you want to have a solid color background, paste this code in, replacing the #cccccc with the hex value you saved from step 3:

 

<style type="text/css">

/*<![CDATA[*/

       

/*  This code prevents side-scrolling */

        body { overflow-x: hidden;}

       .jtpl-main {overflow-x:hidden;}

 

/* This is a fullwidth section - add your comment to describe it */

        #section1 {

        margin: 0 -9999rem;

        padding: 0.25rem 9999rem;

        background: #cccccc;

        }

 

/*]]>*/

</style>

 

 

Scrolling image background:

If you want to have an image background that scrolls with the page, use this text but replace the url with the one you saved from step 3. 


<style type="text/css">

/*<![CDATA[*/

       

/*  This code prevents side-scrolling */

        body { overflow-x: hidden;}

       .jtpl-main {overflow-x:hidden;}

 

/* This is a fullwidth section - add your comment to describe it */

        #section1 {

        margin: 0 -9999rem;

        padding: 0.25rem 9999rem;

        background: url("PASTE_URL_HERE") repeat center center; 

        }

 

/*]]>*/

</style>

 

Note:

This method requires your background image to be at least as large as the section will ever be. If the section grows vertically by adding more content to the columns element, or grows horizontally by opening a browser window on a really large monitor, your background image may appear tiled.

 

Fixed image background:

Finally, if you want to have an image background that stays fixed while your page scrolls past it, use this code, but again, make sure to paste your image URL from step 3:

 

<style type="text/css">

/*<![CDATA[*/

              

/*  This code prevents side-scrolling */

        body { overflow-x: hidden;}

       .jtpl-main {overflow-x:hidden;}

 

/* This is a fullwidth section - add your comment to describe it */

        #section1 {

        margin: 0 -9999rem;

        padding: 0.25rem 9999rem;

        background: url("PASTE_URL_HERE") no-repeat center center fixed; 

          -webkit-background-size: cover;

          -moz-background-size: cover;

          -o-background-size: cover;

          background-size: cover;

        }

 

/*]]>*/

</style>

 

After pasting and modifying your code, save and refresh your page.  Look at it in view mode and you should see the section with the background.  

 

Placing multiple sections on one page

If you want to use several sections on your page, you will need to add a bit more code.

 

In the JavaScript section, duplicate this line but make sure that the id is replaced for each one and that you change the word 'section1' to be 'section2' and so forth:

 

$( "#cc-m-12285023130" ).wrap( "<div id='section1' />" ); 

 

In the CSS section, paste in additional CSS blocks, making sure to update section1 with section2 or section3 as needed.  

 

Here's what the code looks like for http://brentfullwidth.jimdo.com/ which uses three full-width sections, one of each type:

 

<script type="text/javascript">

//<![CDATA[

    $(document).ready(function() {

 

        $( "#cc-m-12219240478" ).wrap( "<div id='section1' />" ); 

        $( "#cc-m-12219243378" ).wrap( "<div id='section2' />" ); 

        $( "#cc-m-12219244778" ).wrap( "<div id='section3' />" ); 

 

    }); 

 

//]]>

</script>

 

<style type="text/css">

/*<![CDATA[*/

 

       

 /*  This code prevents side-scrolling */

        body { overflow-x: hidden;}

       .jtpl-main {overflow-x:hidden;}

 

/* This is the first fullwidth section */

        #section1 {

        margin: 0 -9999rem;

        padding: 0.25rem 9999rem;

        background: #c7b69f;

        }

 

/* This is the second fullwidth section */

        #section2 {

        margin: 0 -9999rem;

        padding: 0.25rem 9999rem;

        background: url("http://brentfullwidth.jimdo.com/app/download/12219261678/coffee-beans-crop.jpg?t=1435355036") no-repeat center center; 

        }

 

/* This is the third fullwidth section */

        #section3 {

        margin: 0 -9999rem;

        padding: 0.25rem 9999rem;

        background: url("http://brentfullwidth.jimdo.com/app/download/12231987478/bridget_light.jpg?t=1435614528") no-repeat center center fixed; 

          -webkit-background-size: cover;

          -moz-background-size: cover;

          -o-background-size: cover;

          background-size: cover;

        }

 

/*]]>*/

</style>

 

Using the same style for multiple sections

Another very common use case is when you want to reuse the same style for several different sections.  This can make this even easier. For example, if you wanted to created a reusable style for a dark blue background fullwidth section, the code could look like this:

 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript">

</script>

 

<script type="text/javascript">

//<![CDATA[

    $(document).ready(function() {

   

  /* Logo with products button on home page */  

        $( "#cc-m-6547813856" ).wrap( "<div class='darkblue' />" ); 

      

 /* Norwegian fish farmers on products page */ 

        $( "#cc-m-6547815556" ).wrap( "<div class='darkblue' />" );        

        

 /* place your order on get started page */ 

        $( "#cc-m-6547819856" ).wrap( "<div class='darkblue' />" );           

       

 /* fast delivery on get started page */ 

        $( "#cc-m-6547821356" ).wrap( "<div class='darkblue' />" );     

 

    }); 

//]]>

</script>

 

<style type="text/css">

/*<![CDATA[*/

 

 

 /*  This code prevents side-scrolling */

        body { overflow-x: hidden;}

       .jtpl-main {overflow-x:hidden;}

 

    /* dark blue full width sections */  

     .darkblue {

        margin: 0 -9999rem;

        padding: 0.25rem 9999rem;

        background: #1F3746;

        }

 

/*]]>*/

</style>

 

 

Final Thoughts

These techniques can be very powerful and should allow a good designer to create nearly any of the hot design trends today.  The best part of this particular method is that it allows the website owner to still  retain full editing ability of the Columns element and all the other elements contained within it.