The background-color property in CSS applies solid colors as background on an element. Here’s an example:
html {
background-color: #82a43a;
}The example used above (#82a43a) is called a hex code, and it is one of several ways that CSS has to represent a single color. There are a number of ways to find the right hex codes. Anyone who has used a design tool has seen a color picker similar to this one:
Hex codes are one way to declare a color in CSS. There are also a whole bunch of names that you can use, for example:
.page-wrap { background: white; }
footer { background: black; }
.almonds { background: blanchedAlmond; }These colors aren’t very flexible, but they can come in handy in a pinch. They’re easier to remember than hex codes, and there are a ton of them.
Another way to declare a color is to use RGB, RGBa, HSL, or HSLa:
#page-wrap {
background: rgba(0, 0, 0, 0.8); /* 80% Black */
}
.widget {
background: hsla(170, 50%, 45%, 1);
}Unlike hex codes, these values allow for transparency (alpha), which can be super useful. Learn more about RGBa or HSLa.
Demo
Browser support
| IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| All | All | All | All | All | All |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| All | All | All | 90+ | 62+ |
More information
CSS Basics: Using Fallback Colors
CSS Basics: Using Multiple Backgrounds
Design Considerations: Text on Images
Add Background Colors to SVGs Using the “rect” Element
7 Uses for CSS Custom Properties
Related properties
background
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
background-blend-mode
.element { background-blend-mode: screen; }
background-clip
.element { background-clip: padding-box; }
background-color
element{ background-color: #ff7a18; }
background-image
.element { background: url(texture.svg); }
background-origin
.element { background-origin: border-box; }
background-position
.element { background-position: 100px 5px; }
background-repeat
.element { background-repeat: repeat-x; }
background-size
.element { background-size: 300px 100px; }
Is there no way to shorten the length of the background color? When making a website, I like using the CSS background color property. However, when using short 3-4 letter words, the background color is the length of the whole page. I sometimes just want to have a small block of color! Please help! Thank you.
backgroud:#333;background: rgb(0,0,0,0,7);
In rgba() format, is it possible to specify just the alpha value alone? I need to over-write the alpha value alone on hover.
You can overwrite the alpha value on
:hoverby writing out the CSS property again with the same color and new alpha value.Hello,
What is the best value define for “Alfa” in rgba(). Because I always use this Alfa coordinate as decimal(0.1 – 0.9), as transparency declare in rgba(). I know it also have value from “1-255”. But if we want to define a color as simple rgb() is always equal to rgba() if we declare “Alfa” from “1-255”, Please tell me .
I like using hex, how can i put gradient in rgb?