Five Template: How to add a background color to your text on a single header

Five Template: How to add a background color to your text on a single header by EG Media Co | Squarespace CSS tricks, Five template tweaks, Five Template CSS tricks, CSS Tricks, Squarespace Tips, Five Template, Squarespace Template, Easy CSS tricks, DIY web design, femmepreneur, girl boss, bucketlist bombshells

There comes a time when you’re in need of further customizing your template far from the design options Squarespace offers you. Well thank god for CSS because there’s code for that 😉. Whatever it is you’re struggling with or scratching your head about, wondering if that’s even possible, the answer to most questions will be yes, it is!

Sometimes I’ll tweak my website here and there and I’ll run into the same problems that some of you might have too. I was recently changing the banner image on the header of my home page to an on-brand photo (woohoo new photos!) and I noticed that the page description text that appeared on my header was being washed out by the background and it was hard to read.

See the image below:

Five Template: How to add a background color to your text on a single header by EG Media Co

Given that I had just gotten some on-brand photos taken I really wanted to add one to my website to connect more with my audience when they land on my page. I also wanted to keep who I am and what I do front and center so when people go to my website, they don’t think I’m just some conceited bit*h with just a huge photo of me slapped on there. The problem I was having is pictured above, as you can see the text is extremely hard to read and no matter what I tried the text was still getting washed out by the image.

After sitting there, scratching my head for a good 30 minutes I was able to find code that worked perfect for this type of situation.

As you will see in the image below, I was able to add a background color to the text: 

Five Template: How to add a background color to your text on a single header by EG Media Co

This is how I did it!

Since we’re only trying to do it on a single page header you must first find the page ID that is located when you right-click on the page title you’re trying to change. When you right click select Inspect. You will see a pane pop up on the right side of your screen.

Five Template: How to add a background color to your text on a single header by EG Media Co

Scroll up to where you see “<body-class=…”

Scroll down that block and you’ll find the collection ID under “collection-5a680789a1397430” I have circled it below for your reference. If you hover over the collection id it will reappear as a block on the left side of your screen as you can see below.

Five Template: How to add a background color to your text on a single header by EG Media Co

You’ll want to add this at the beginning of  “h1#page-title {” as well as at the beginning of “#page-description p {background-color: #fff;}”

HERE’S THE CODE:

// Home Page Banner Background Text Color (this is simply for reference to know what the code is being applied to) Let’s continue.

For example:

#collection-5a680789a1397430

 h1#page-title {

          display: inline;

          background-color: #fff;

          padding-left: 10px;

          padding-right: 10px;

     }

#collection-5a680789a1397430

#page-description p {background-color: #fff;}

Feel free to change the background-color “#fff ” to one of your brand colors or you can leave it white!

**NOTE: if you wish to keep the background color on your text on ALL page banner images then the code would be like this:

(without the collection number)

h1#page-title {

          display: inline;

          background-color: #fff;

          padding-left: 10px;

          padding-right: 10px;

     }

#page-description p {background-color: #fff;}