CSS

How To Set Background Colour

Every so often when I go to bed, I notice dirt on my bed which Aria has left for me after a long day of her rolling around in the garden and then napping on my bed.

Aria, couldn’t you sleep somewhere else after you’ve been laying in dirt?

I suppose I could.

Technically.

But why?

You leave dirt in my bed!

How can you even see it?

Well it’s dark and shows up against the white covers.

Sounds like another solution is to change the colour of your sheets.

Then you wouldn’t notice.

As infuriating as she is, she does sort of have a point. Not about changing the colour of my bed sheets, but the fact that a background colour really impacts how well you can see what is laying on top.

So let’s talk about background colours in CSS.

Hopefully you are aware of how colours are set in CSS. If not, feel free to revisit this post. Because Aria will complain if I don’t I’ll use salmon colour in most examples.

Firstly, what do we mean by background colour in CSS?

You may have noticed that each web page we have made, either through individual lessons or through either of our two projects, has black text on a plain white screen.

This is because, unless the CSS says otherwise, the body element will be white. While the body element contains all your other HTML elements, it lays them onto a plain white background.

Firstly, what do we mean by background colour in CSS?

Imagine you had a blanket.

I’m listening.

And it had the words ‘Aria, sleep here’ embroidered onto it.

Now I’m actually listening.

The colour of the actual blanket is like the background colour in CSS.

Great. So how do I change it?

And where is this blanket?

There is no blanket; why would this blanket exist?

I thought you might have got it so I stop sleeping on your bed.

To change this, you need to use the background-color property in CSS.

        background-color:

When using the background-color property, you just need to write the name of the CSS property, like we have done above, and then state what colour you want.

Remember, this can be done using either the keyword method, rgb method, rgba method or using hexadecimal.

Here is an example using the Salmon keyword.

        background-color: salmon;

Don’t forget the ; at the end!

You can set the background colour property in CSS on many HTML elements, including text, but it is most commonly used on divs or on the entire page.

Wonderful Words On A Slippery Salmon Surface

        HTML
        <div id="salmon-box">
        </div>
        CSS
        #salmon-box {
        	background-color: salmon;
        }

        HTML
        <div class="salmon-boxes">
        </div>
        <div class="salmon-boxes">
        </div>
        <div class="salmon-boxes">
        </div>
        CSS
        .salmon-boxes {
        	background-color: salmon;
        }

You know if you want to leave one of those salmon boxes laying around the house, it wouldn’t be the worst thing to have ever happened…

If you want your entire page to have this background colour, you can apply the CSS to the body element like this:

        body {
        	background-color: salmon;
        }

This will work if this CSS is saved in an external CSS file of part of the internal CSS styling block of code.

Another way to set the background colour of the body is directly in the HTML using in-line CSS.

        <body style="background-color: salmon;">
        	<Other HTML Here>
        </div>

Here is what the About Me page we made during Project #2 would look like with a salmon background.

Mmmmmmm So Much Salmon

Perfect!

Maybe I don’t need any HTML elements.

I just want to look at this colour all the time.

That seems a bit pointless.

You need to add something!

Well as I like the colour so much, maybe I’ll make all my text this colour too.

Aria has fallen into a bit of a trap here. Just like when she jumps into the Christmas tree box which is too big to climb back out of.

While you might want to pick a background colour based on colours you like, it might make your other HTML elements difficult to see.

Think back to Aria’s imaginary blanket. If the embroidered text were salmon coloured, Aria’s favourite colour, then making the colour of the blanket salmon too would make the words impossible to see! Background colours have to be chosen carefully.

Let’s look at an example using a indigo background.

        <body style="background-color: indigo;">

You Would Need Eagle Eyes To Read This Text

Because the colour of the text and the background are similar, it’s hard to see the text. This is a bad design choice.

Instead you should try and make the two colours contrast, so it’s easy to read the words, while making sure the colours still go together.

For example, if you have black text on your page, you could use a pale grey background.

        <body style="background-color: lightgrey;">

Much Easier To See

Or if you want a bit more colour, try a pale colour; like Seashell.

        <body style="background-color: seashell;">

More Like A Very Very Pale Salmon

Use the box below to try out your own background colours on the box below. Try and find colours that make the text stand out.

      
      background-color:;

Example text. How easy is it read?

Are you going to finally tell me where this blanket is then?