Introduction
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.
Solid opaque colors
Following we give the paragraph a yellow background color:
p {background-color: yellow}
A paragraph with yellow background color.
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.
Opacity in backgrounds
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)}
A paragraph with some text just to convey the working of the alpha parameter in color values. Notice how this piece of text is not visible.
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)}
A paragraph with some text just to convey the working of the alpha parameter in color values. Notice how this piece of text is very slightly visible.
Now adding more of that transparency:
div {background-color: rgba(255, 255, 255, 0.5)}
A paragraph with some text just to convey the working of the alpha parameter in color values. Notice how this piece of text is partially visible.
And even more...
div {background-color: rgba(255, 255, 255, 0.2)}
A paragraph with some text just to convey the working of the alpha parameter in color values. Notice how this piece of text is a lot visible.
So much that the background becomes completely transparent by alpha = 0:
div {background-color: rgba(255, 255, 255, 0)}
A paragraph with some text just to convey the working of the alpha parameter in color values. Notice how this piece of text is a completely visible.
And now our text becomes completely visible!
The transparent
value
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}
A paragraph with some text just to convey the working of the alpha parameter in color values. Notice how this piece of text is a completely visible.
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.