menu
background-color is the CSS property that sets the color of your element’s background.
taught by Tina May
You can use one of the 147 predefined CSS color names. The options are a bit limited, so you generally use this just for playing around with code.
background-color:
Tip: All 147 color names and visual examples can be seen here.
Oh hey there!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can use hexadecimal (HEX) color code, the universal six-digit code used to define over 16 million color options. Remember that it always begins with the # symbol.
background-color:
Tip: Each digit represents a value from 0 to 9 and A to F, and it accepts both uppercase and lowercase.
Oh hey there!
What's brewing, good looking?
You miss 100% of the shots you never take.
You can use any rgb() color code, which represents red, green, and blue. Each of them can have a value between 0 to 255.
background-color:
Tip: Setting all three codes to the same value will give you shade of grey and you can increase/decrease this to make it lighter/darker, or tweak the tone slightly.
Oh hey there!
What's brewing, good looking?
You miss 100% of the shots you never take.
The hsl() stands for Hue (represents the color wheel and accepts a value between 0 to 360); Saturation (the color intensity) and Lightness (the amount of white or black in the color).
background-color:
Tip: Both Saturation & Lightness accept a percentage value. 0% Saturation is full grayscale, while 100% is full color. 0% Lightness is full black, while 50% is balanced, and 100% is full white.
Oh hey there!
What's brewing, good looking?
You miss 100% of the shots you never take.
We can use either rgba() or hsla() color codes. The a here stands for additional alpha channel that accepts a value between 0 (fully transparent) to 1 (fully non-transparent).
background-color:
Tip: The alpha channel accepts a value with an increment of two decimal places so you can control the transparency with greater detail.
Oh hey there!
What's brewing, good looking?
You miss 100% of the shots you never take.
Select any property below and we’ll show you step-by-step how to use the property, with video demo, tips and practical examples you can code for yourself.
<div>
<p class="style-1">Tuition is valuable. But you know what's invaluable? Intuition.</p>
<p class="style-2">I know what to do. But in a much more real sense, I had no idea what to do.</p>
<p class="style-3">You miss 100% of the shots you never take.</p>
</div>Tuition is valuable. But you know what's invaluable? Intuition.
I know what to do. But in a much more real sense, I had no idea what to do.
You miss 100% of the shots you never take.
/* Change the background color of the first paragraph*/
.style-1 { padding: 40px 20px; border: 1px #513EC9; background-color: DarkOliveGreen; }
/* Change the background color of the second paragraph*/
.style-2 { padding: 40px 20px; border: 1px #513EC9; background-color: rgba(81, 62, 201, 0.75); }
/* Change the background color of the third paragraph*/
.style-3 { padding: 40px 20px; border: 1px #513EC9; background-color: #41414d; }
Try changing the background color of each of the following elements. Below we’ve put three elements with some padding & margin so you can see the each one.
Let’s test out what happens when you give their background a HEX, RGB or HSL values, or one of the 147 color names.
Try these (or anything else!):
Copyright 2023