Use of the background in typography

Another important property of text is its color. It is controlled by the color property. You will learn more details about this property and its values in the next assignment. In this assignment we will learn how to use the background of the block to enhance the typography as well as what are the best combinations of background and text colors.

The color is most frequently specified in CSS using the hexadecimal format with a hashtag at the beginning:

#000000 — Black;
#ffffff — White;
#ff0000 — Red, etc..

The background image for the block can be set using the background-image property, and the background color can be set using the background-color property:

div {
  background-image: url("path_to_image_file.png")
  background-color: #cccccc;
}

The background image and the background color of the block should always strongly contrast with the text color. The greater the contrast, the easier it will be to read the text under different lighting conditions and on different devices. Therefore, we set a background image for a block, we must additionally set a suitable background color. In this case, the text can still be read while the image is still loading or if it fails to load at all:

/*
  An ideal level of contrast:
  the text color is white, the background color is black
*/

p {
  background-color: #000000;
  color: #ffffff;
}

/*
  A bad level of contrast:
  the text and background colors are both gray
*/

span {
  background-color: #cccccc;
  color: #ddddddd;
}