CSS Basics: Stay Ahead in Web Design – Top Tips for Utilizing Background and Enhancing Your Skills

Deutsch

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

CSS Property background
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:

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

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

  3. using an HTML Color Name (e.g. LightGrey aka LightGray).

  4. using a RGB value rgb(R,G,B)
    Colors can also be defined by their RGB values. The values for the three 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 in 1. is a matter of taste.

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

    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. using a RGB value including transparency rgb(R,G,B,A)
    The color definition in 4 can be extended. In addition to the three color values, an additional value can be specified 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 of 70 percent. This results in the RGBA color code rgb(218,165,32,0.7). This is the color     .

Example 
/* 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: 1.0em;
}