Background Color

suggest change

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

This can be applied to all elements, and ::first-letter/::first-line pseudo-elements.

Colors in CSS can be specified by different methods.


Color names

CSS

div {
  background-color: red;  /* red */
}

HTML

<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 */
}

RGB / RGBa

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 */
}

HSL / HSLa

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:

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 */
}

Interaction with background-image

The following statements are all equivalent:

body {
  background: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-color: red;
  background-image: url(partiallytransparentimage.png);
}

body {
  background-image: url(partiallytransparentimage.png);
  background-color: red;
}

body {
  background: red url(partiallytransparentimage.png);
}

They will all lead to the red color being shown underneath the image, where the parts of the image are transparent, or the image is not showing (perhaps as a result of background-repeat).

Note that the following is not equivalent:

body {
  background-image: url(partiallytransparentimage.png);
  background: red;
}

Here, the value of background overrides your background-image.

For more info on the background property, see http://stackoverflow.com/documentation/css/296/backgrounds/3595/background-shorthand#t=201608121024558705146

Feedback about page:

Feedback:
Optional: your email if you want me to get back to you:



Table Of Contents