CSS Basics: Mastering the Art of Background – Top Tips to Enhance Your Web Design Skills

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 the following background-related properties:

• 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.

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:

1. Hex Color Code #RRGGBB
   The hex color code is a compact way to define colors. This is the standard way to define a color in CSS.

   The hex code of the color always starts with a hash character (also called: number sign) #, followed by 6 hex digits (0 to 9 and A to 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     .

2. Hex Color Code including transparency #RRGGBBAA
   The hex color code can be extended by two additional hex digits which specify the alpha channel. This allows you to define the opacity of a color shade. This value must be 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     .

3. Standard Color Names
   Our Color Table provides an easy-to-use list of all standard colors in alphabetical order. The name of each color as well as its RGB and HSL values are given. The list shows the various shades of grey only using the notation *Grey, for example LightGrey or DarkSlateGrey.

4. RGB values rgb(R,G,B)
   Colors can also be specified by using their RGB values. The values for the three primary color components R, G and B must be given in in decimal notation and must be in the range of 0 to 255. Whether you use this method or prefer the method described above is a matter of taste.

   Example:
   The color code #DAA520 is composed of the three primary color components:

   Red component: Hex DA = decimal 218,
   Green component: Hex A5 = decimal 165,
   Blue component: Hex 20 = decimal 32

   This means that #DAA520 is the same as rgb(218, 165, 32).
   The color code rgb(218,165,32) corresponds to the color     .

5. RGB values including transparency rgb(R,G,B,A)
   Similar to the Hex Color Code, a fourth value for transparency can be specified when you define a color using RGB values. In addition to the three primary color values, an additional value can be given for the alpha channel, which specifies the opacity of the color. The opacity value must be in the range 0.0 to 1.0.

   Example:
   The color code rgb(218,165,32) is given an additional opacity value of 70 percent. This results in the RGBA color code rgb(218,165,32,0.7). The color is     .

Set Background Color or Image Using the background Property

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