[Video Pending] Changing Page Backgrounds with CSS

Sometimes a solid color just wont do when you want a website that really stands out! The following snippets are from my Squarespace CSS Cheat Sheet. Now if you are brand new to CSS, grab my free Getting Started guide before you jump into this article!!

Gradient Backgrounds

The following codes will apply a gradient to your site pages, blending colors in the background. To get inspiration on gradient blends, visit https://cssgradient.io/swatches/ You can copy any CSS code there and paste it after the “linear-gradient(“ section of the codes below. Have fun! ♥

Horizontal Gradient

The following works well on all Brine family templates:

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient(to right, #000000 , #FFFFFF );

}

The following works well on all Bedford family templates:

#siteWrapper {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient(to right, #000000 , #FFFFFF );

}

Diagonal Gradient

The following works well on all Brine family templates:

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image: (to bottom right, #000000 , #FFFFFF );

}

The following works well on all Bedford family templates:

#siteWrapper {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient(to bottom right, #000000 ,

#FFFFFF );

}

Vertical Gradient

The following works well on all Brine family templates:

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient( #000000, #FFFFFF );

}

The following works well on all Bedford family templates:

#siteWrapper {

background-color: #000000 ;/* make this your darkest color */

background-image: linear-gradient( #000000, #FFFFFF );

}

Vertical Gradient with Three Colors

The following works well on all Brine family templates:

.Main-content {

background-color: #000000 ; /* make this your darkest color */

background-image: linear-gradient( #000000, #666666, #FFFFFF );

}

The following works well on all Bedford family templates:

#siteWrapper {

background-color: #000000 ;/* make this your darkest color */

background-image: linear-gradient( #000000, #666666, #FFFFFF );

}

Split Color Background - Right Down the Middle

The following works well on all Brine family templates:

.Main-content {

background: linear-gradient(90deg, #000000 50%, #FFFFFF 50% );

}

The following works well on all Bedford family templates:

#siteWrapper {

background: linear-gradient(90deg, #000000 50%, #FFFFFF 50% );

}

Did you catch that pattern?

All Squarespace sites are built using a specific theme family, and that means not all elements are called the same thing behind the scenes. When working in CSS it is important to identify the initial symbol that your CSS code needs to work with an element. If this is going over your head, don’t worry! It really isn’t as complicated as it sounds. When using code, the very first symbol can help the system figure out what you are asking it to do. Some theme families use a pound symbol, or hashtag if you were born after 1985 ( # ) while others use a period ( . ) Brine is a common family that uses ( . ) while Bedford templates generally use ( # ) If your CSS code isn’t working the way you want it to, the first thing you can do to troubleshoot that would be to see if changing the symbol can make it work.

Ready for more?

Those codes are just one section of my Squarespace CSS Cheat Sheet, a PDF with over FIFTY pages of copy and paste code that will make your Squaresapce site look fabulous.