CSS Background Color

Amongst the various aspects of CSS backgrounds to discover in this unit, the first one, that we will be exploring in this chapter, is background colors.

To apply a background color in CSS we can use the background-color property.

Back in the colors unit we saw numerous ways to write a color value in CSS that included color names, hexadecimal notation, rgb() and hsl() functions and finally alpha filters applied to all these cases. Wherever CSS expects a <color> value the logic behind the values we can mention remains the same.

Therefore in background-color too; and any other property involving a color, we can apply the concepts which we learnt in CSS Colors. So let's start applying stuff that we've learnt.

Following we give the paragraph a yellow background color:

p {background-color: yellow}

Instead of the name yellow, we could've also used one of the following values:

p {background-color: #ff0}
p {background-color: rgb(255, 255, 0)}
p {background-color: hsl(60, 100%, 50%)}

And we will get the same result.

One thing to note over here is that all these four color values apply a completely opaque background color. Anything behind p, for instance, (in this case) would not be visible to any extent.

And this is what we will be seeing next - background colors with an alpha parameter for opacity.

To add an opacity to a given color we can use the rgba(), hsla() or #RGBA values by simply supplying them with an alpha paramter.

For the rgb() and hsl() functions, alpha can be any number between 0 and 1 inclusive.

For #RGBA, the alpha's value can be any number between 0 and f.

This number governs the extent of visibility of the background color. 0 is for completely transparent and 1 is for completely opaque. The greater the alpha value the greater opacity or lesser the transparency.

Let's see a couple of examples to see the difference between opaque and transparent backgrounds:

For the sake of demonstrating how does alpha work in background colors, we will overlay a div to paragraph below with some text, and then give it a background. How we overlay the div is part of some later chapters, and therefore you can ignore it for now.

First let's see how a completely opaque background will look like:

div {background-color: rgb(255, 0, 255)}

Notice how the div here, with a white background, is hiding the text below it.

Now let's see what alpha offers us. We'll start by making the background slightly transparent.

div {background-color: rgba(255, 255, 255, 0.8)}

Now adding more of that transparency:

div {background-color: rgba(255, 255, 255, 0.5)}

And even more...

div {background-color: rgba(255, 255, 255, 0.2)}

So much that the background becomes completely transparent by alpha = 0:

div {background-color: rgba(255, 255, 255, 0)}

And now our text becomes completely visible!

So as you saw above, the background in the last example was completely transparent. We did so by setting alpha = 0. However this is just one way to have a completely transparent background - we could've also used the transparent value.

div {background-color: transparent}

As you can see it has the exact same effect as setting alpha of any color to 0. The computed value of transparent, like in JavaScript's getComputedStyle() function, is rgba(0,0,0,0).

And this conludes background colors in CSS. Next what we have in line is background images, which is certainly more detailed than this simple chapter.