Questions And Answers

More Tutorials

CSS Background Color

With CSS you can set colors, gradients, and images as the background of an element. It is possible to specify various combinations of images, colors, and gradients, and adjust the size, positioning, and repetition (among others) of these.

Background Color

The background-color property sets the background color of an element using a color value or through keywords, such as transparent, inherit or initial.

  • transparent, specifies that the background color should be transparent. This is default.
  • inherit, inherits this property from its parent element.
  • initial, sets this property to its default value.

css file

div {
 background-color: red; 

html file

<div>This will have a red background</div>

Hex color codes

Hex code is used to denote RGB components of a color in base-16 hexadecimal notation. #ff0000, for example, is bright red, where the red component of the color is 256 bits (ff) and the corresponding green and blue portions of the color is 0 (00).

If both values in each of the three RGB pairings (R, G, and B) are the same, then the color code can be shortened into three characters (the first digit of each pairing). #ff0000 can be shortened to #f00, and #ffffff can be shortened to #fff.

Hex notation is case-insensitive.

body {
 background-color: #de1205; /* red */
.main {
 background-color: #00f; /* blue */


Another way to declare a color is to use RGB or RGBa.

RGB stands for Red, Green and Blue, and requires of three separate values between 0 and 255, put between brackets, that correspond with the decimal color values for respectively red, green and blue.

RGBa allows you to add an additional alpha parameter between 0.0 and 1.0 to define opacity

header {
 background-color: rgb(0, 0, 0); /* black */
footer {
 background-color: rgba(0, 0, 0, 0.5); /* black with 50% opacity */


Another way to declare a color is to use HSL or HSLa and is similar to RGB and RGBa.

  • HSL stands for hue, saturation, and lightness, and is also often called HLS: Hue is a degree on the color wheel (from 0 to 360).
  • Saturation is a percentage between 0% and 100%.
  • Lightness is also a percentage between 0% and 100%.

HSLa allows you to add an additional alpha parameter between 0.0 and 1.0 to define opacity.

li a {
 background-color: hsl(120, 100%, 50%); /* green */
#p1 {
 background-color: hsla(120, 100%, 50%, .3); /* green with 30% opacity */


In this page (written and validated by ) you learned about CSS background color . What's Next? If you are interested in completing CSS tutorial, your next topic will be learning about: CSS background gradient.

Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue:

Share On:

Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using, you agree to have read and accepted our terms of use, cookies and privacy policy.