Hi there, I am wanting to know if you can add a full width coloured background strip behind a type block? I want to add strips of colour to divide the type like the grey strips in this site http://blussh.com.au/about/ that I know was created is Squarespace.

I have very basic knowledge of editing code if this is how it needs to be done. Could I have instructions on how to do this? I am currently using the Five template.

Thanks for your help,

Hi. I am also using Five and wanted to do the same thing. What they have done is a neat trick and quite simple to implement so thanks for pointing me to that example. I'm going to show you an easier way than they have done that results in less code and more reuse.

First you need to add some CSS code (that will be used later on the page) like this to the Design > Custom CSS:

.full-width-background {
 margin-left: -2000px;
 margin-right: -2000px;
}

.fwb-red {
 background-color: red;
}

Add a "Code Block" section to your page with the code something like this:

<div class="full-width-background fwb-red">something</div>

On your page you should now have a section that goes across the page with a red background.

Adjust the class name "fwb-red" and background-color value as required, most likely you will user a hex colour code for the colour e.g. #999999.

You can create a few of these CSS classes for different colours that you want to use for your website, but make sure you use keep the prefix of fwb otherwise it may override colours used elsewhere on the site.

As you probably noticed, the text "something" doesn't appear on the page. This is because the left and right margins have been adjusted by -2000 pixels to extend them out of the content area and off the page. The figure doesn't need to be anywhere near this much, but it doesn't really matter and that is the figure that they used on their page and it is good to use a large figure to cater for different screen sizes.

Next we want the content to appear on the screen inline with existing content. To do this we need to add padding in to get the content back to where it needs to be. The first part of this is adding a new CSS class like the below:

.fwb-content {
 padding-left: 2000px;
 padding-right: 2000px;
}

Then go back to your page and change the code block to:

<div class="full-width-background fwb-red">
 <div class="fwb-content">something</div>
</div>

You should now see "something" in the correct location. You can replace "something" with whatever you want but you will need to understand a bit about HTML to do so. This can be used multiple times on the same page, where the example you linked to used a specification for each section.

Hope this helps.

I found that I missed a very important part in the above answer. Because the div overflows to the right it adds a horizontal scrollbar to the page. You will need to also add the following in as custom CSS to hide the overflow:

page-body-wrapper {

overflow-x: hidden !important;}

Is there any way I can have a form block on top of the background?

It doesn't work for mobile. Any ideas how to solve this?

It doesn't work for mobile. Any ideas how to solve this?

Fixed it with #siteWrapper instead :)

Fixed it with #siteWrapper instead :)

Thank you so much for this! Is there any way to do this with an image instead of solid color?

Thank you so much for this! Is there any way to do this with an image instead of solid color?

I've followed all the steps and still cannot get my text to show up. I'm trying to change the text to an h2 and change the color to white. I added the h2 to the code and here is what I added to the css .fwb-content h2 { color: #fff!important; text-align: center; } It's not even showing up, because I can't highlight anywhere?