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.

Tutorial

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.

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.

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

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.

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.

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 {
}

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%);
}

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.

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.

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

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:

LIKED THIS POST?

More Squarespace tips & tricks this way

When I talked about changing the size of mobile fonts in Squarespace at the very end of the post I gave you a quick tip on how to turn off automatic hyphenation. However, I wanted to do a separate post about it since there are some things you should consider when deciding to do it.

If you're using Squarespace's commenting system on your blog, you'll notice you can't change the color of the "Post Comment" black button through your style editor. However, today I want to show you a super easy code trick that you can use to do that and have the button match the rest of your site!

So, you want to create a custom landing page in Squarespace for an opt-in, product, tripwire or even for Instagram and you want to eliminate all distractions from the page so all your visitors have no escape, right? (insert evil laugh here). In that case you probably want to remove the header and footer from your page – otherwise why would you be reading this – so let's dive into how you can do that in your template.

Want to add some CSS to just one page on your site, that's NOT an index section? Don't want to add the code to your page's settings? Then you're going to want to find your page's unique ID to make all the changes you like on just one page of your Squarespace site. But don't worry, it's pretty easy to find. And if you're wondering, yes, this applies to any non-index page of any template!

I know I'm not the only one still running around making sure everything on my site is ready for the GDPR deadline, and since that includes setting the EU cookie banner I wanted to share a quick snippet that my lovely friend Yana Dirkx from Bliss & Gold came up with to make the awful Squarespace cookie banner look much much nicer!

Not feeling happy with how Squarespace is resizing your fonts in mobile? Then let's do something about it shall we? In today's quick tutorial I'm going to show you how you can easily change the size of your fonts in mobile view. Let's go!