CSS Property Background – Specify Background Color
Backgrounds are an essential part of CSS. They are one of the most important things that you just need to know. There are many properties related to backgrounds. The five most important properties are highlighted in yellow. The CSS property background is a shorthand property for
-
background-color -
background-image -
background-repeat -
background-position -
background-size(CSS3) -
background-origin(CSS3) -
background-clip(CSS3) -
background-attachment
It doesn't matter if one or more of the values listed above are missing.
| Description | Possible Values | Default Value | Category |
|---|---|---|---|
| background | background color background-image background-repeat background-position background-attachment inherit |
colors backgrounds |
The value shown in orange is the standard use of the CSS background property.
Define a Background Color
There are different ways to define colors in CSS:
-
using the hex code of the color #RRGGBB
This is the standard way to define a color in CSS.The hex code of the color always starts with the hash sign #, followed by 6 hex digits (0 – F). The color components for red, green and blue are each specified using two hex digits (00 to FF).
For Example:
The color code #DAA520 corresponds to the color . -
using the hex code of the color including transparency #RRGGBBAA
The hex code described in point 1 above can be extended by two additional digits which specify the alpha channel. This allows you to define the opacity of a color shade. This value must in the range of 00 to FF where-
00 means 0% opacity, i.e. full transparency and
-
FF means 100% opacity, i.e. no transparency.
Example:
The color code #DAA520B2 (approx. 70% opacity) represents the color . -
-
using an HTML Color Name (e.g. LightGrey aka LightGray).
/* Background of the page */
body {
font-family: "Noto Sans", "Open Sans", Verdana, Arial, sans-serif;
/* Color: GhostWhite */
background: #f8f8ff;
/* DarkSlateGrey */
color: #2f4f4f;
/* Standard Font Size */
font-size: 1em;
}