CSS

#box {

background-color: #000000;

color: #ffffff;

}

Result:

As you can see, the background has been made black, as per the hex code applied to the background-colour property. Also the text has been made white by the hex code used for ‘color’. This use of opposing colours against one another (white against its contrasting colour black) is one of the most important theories to consider when choosing colours for your website. Using contrasting colours helps to ensure that text can be read with ease by your users. Choosing colours that are closer to each other in the colour spectrum often produces issues of legibility for your users.

Background image

Background images are images that are applied to the entire background of an element. One of the main benefits of background images over a standard image is that you can overlay text with ease over the top of the background image, and it is also a little bit easier to manipulate the image than when using the standard image element. Let’s explore:

First, the syntax. The syntax for adding a background image to an element is as follows: