Adding a Half Background to Your Page Sections with CSS

When it comes to adding backgrounds to different sections of your Squarespace site, you can easily do it by using indexes (in selected templates).

An index allows you to stack pages on top of each other, creating an interesting layout by alternating full-width images with text or adding the latter in front of the former. But not only that, they can also be very useful if you want to incorporate solid-colored backgrounds behind your content that cover a specific area.

“Why bother with CSS if I can simply create a color block image and place it as a background?” Because by using an image you’ll lose too much time trying to align it to the exact position you want it in, only to have it move again when viewing on a different screen.

In this post, you’ll see how you can easily create a responsive half-screen and angled background with CSS.

Note: this tutorial uses indexes that allow banners with content, so make sure your template supports them.

Adding a half background to your Squarespace Page section by using CSS

 

Creating an index

To customize your background, you’ll first need to create an index. This will allow you to target the exact section you want to edit easily.

Go to your Pages menu, click on the plus sign and select Index.

Creating an index in a Squarespace site.

Inside it, include the “pages” or sections you want to stack on top of each other. This example is a homepage that has 4 different sections: main banner, about intro, gallery preview and services overview. The footer is not part of the index.

Example of an index created with a Squarespace template.

It’s important that you name your index pages something simple since that will be the way you’ll be targeting a specific section. To do it, you only need to edit the URL slug under the page settings. In this example, the page slugs will be as follows:

  • Main banner – banner
  • About intro – intro
  • Gallery Preview – preview
  • Services overview – overview
Customizing an index page URL slug under page settings.

Keep in mind that as with all your other site pages the slugs will have to be unique, so if you create more than one index you won’t be able to use banner for the top page on the second one.

 

Using the CSS snippet

To create the color block background, you’re going to use the linear-gradient property which looks like this

 background: linear-gradient(angle, color-stop, color-stop);

Where the angle can be set as degrees (e.g 90deg, 65deg, 180deg) or direction (e.g to top, to bottom, to left, to right) and the color-stop refers to the hex codes of the colors of the gradient and their coverage percentage.

For example, a left to right gray (#ebebeb) and white gradient would look like this:

background: linear-gradient(90deg, #ebebeb 50%, #fff 50%);

This is a left to right gray half-background.
You can stretch and shrink the browser window to see how the gray area continues covering 50% of this block.

 

Creating a half-screen background

To implement the previous code, you’ll need to address one of the sections of your index. In this example, the half background will be added to the about page with the slug intro.

If you right-click on the background of your section – away from the content – and click on inspect element (I recommend using Chrome) a <div> will be highlighted with the class Index-page-content.

Inspect element window showing the name of the class of the index section.

That class is set for every page of your index, so if you were to alter any of its properties – like the background – you would be editing it for ALL index sections.

But, if you look at the parent element – the one that contains that div – you’ll notice the <section> has an id value of intro. That intro is, as you recall, the name given to the URL slug.

Inspect element window showing the id of an index section.

So, by selecting the id instead of the class, you’ll be able to add the background to that specific section of your index.

Now, go to the CSS injection window and add your selector:

#intro {
}
Adding the id of the index section to the CSS injection window.

Then, add the background property and your parameters and voila, now you have a half-gray background.

#intro {
background: linear-gradient(90deg, #ebebeb 50%, #fff 50%);
}
Adding the background property to the CSS injection window in Squarespace.

 

Creating an angled background

To create an angled color block the same code snippet is used, but you can change the angle depending on the look you’re after by using degrees:

background: linear-gradient(45deg, #ebebeb 50%, #fff 50%);

Or setting the direction:

background: linear-gradient(to top left, #ebebeb 50%, #fff 50%);

This time, the angled background will be added to the services section, with the slug overview. If you don’t remember the one you used you can check it under your page settings or by doing inspect element again over the background of your section.

#overview {
}
Adding the id of the services section to the CSS injection window.

By including the background properties, the new snippet would now be:

#overview {
background: linear-gradient(to top left, #ebebeb 50%, #fff 50%);
}
Adding the background properties in CSS for an angled background.

Now, you might notice this background looks very jagged on the color intersection. With some color combinations it might not be that obvious, but take this recreation made with black and white as an example:

This is an angled black and white background.
Notice the very jagged separation between colors.

To fix the problem and make the line smoother, you can slightly alter one of the percentages so it overlaps with the other color in a couple of pixels, unnoticeable to the naked eye.

Like this:

#overview {
background: linear-gradient(to top left, #ebebeb 49.8%, #fff 50%);
}

Or like this:

#overview {
background: linear-gradient(to top left, #ebebeb 50%, #fff 50.2%);
}

This is an angled black and white background.
By increasing the white portion of the gradient by .2 percent (50.2%), the dividing line looks much smoother.

Back in the services section example, only .1 percent more is necessary to achieve the smoothness of the line since the gray color blends in easily with the white half.

Smoothing the angled line-gradient division with CSS.

 

Playing with gradients

By knowing how to create these angled backgrounds, you can take it a step further and play with the percentages and degrees to achieve different results.

For example, by keeping the slant to top left but bumping up the percentages, you get a more trapezoidal shape.

#overview {
background: linear-gradient(to top left, #ebebeb 70%, #fff 70.1%);
}
Altering the line-gradient proportion to create more trapezoidal shapes as background.

TO KEEP IN MIND

  • The values of the gradient percentages should be close together if you’re looking to create a sharp line instead of an actual gradient.
  • The second value should always be bigger than the first one in order to overlap.
  • To improve compatibility, make sure to repeat the CSS rule with the browser prefixes and removing the to from to top left if applicable. In the case of the last example, the entire snippet would look like this:
    #overview {
    background: linear-gradient(to top left, #ebebeb 70%, #fff 70.1%);
    background: -webkit-linear-gradient(top left, #ebebeb 70%, #fff 70.1%);
    background: -moz-linear-gradient(top left, #ebebeb 70%, #fff 70.1%);
    background: -o-linear-gradient(top left, #ebebeb 70%, #fff 70.1%);
    background: -ms-linear-gradient(top left, #ebebeb 70%, #fff 70.1%);
    }

Awesome! Now you have a different way to spice up your page sections with a couple of lines of CSS.

 

Until next time,
B.


GET YOUR OWN CSS CHEATSHEET

And learn more about what the different properties do, so you can further style your backgrounds

SHOW ME THE WAY!
Create an eye-catching half background for your Squarespace index pages, with custom code