CSS Backgrounds

The background property in CSS defines the background of the selected element on the web page.

There several background properties. These are:

background-color

background-image

background-repeat

background-attachment

background-position

background

Let's look at each property individually.

The background-color:

The background-color will change the background color of the selected element or the web page.

                 
                  
    <style>
      .color {background-color: DodgerBlue; color: white;}
    </style>

      <p class="color">This a text paragraph with blue background
      and white text.</p>

The output:

This a text paragraph with blue background.

The background-image:

The background-image property will add an image as a background to the web page or the selected element.

                 
                  
    <style>
      p{background-image: url("images/html5.png");}
    </style>
 
      <p >The image will appear as a background here.</p>

Once the image is set as a background then we can apply some more properties.

Specifically, with the background-repeat property we can repeat an image (horizontally/vertically) or not.

To repeat the background image horizontally use: background-repeat: repeat-x;

To repeat the background image vertically use: background-repeat: repeat-y;

To NOT repeat the background image use: background-repeat: no-repeat;

The background-attachment

The background-attachment property defines the scrollability or not of the background image.

Whe set to fixed the scrolling is disabled: background-attachment: fixed;

When set to scroll the background image will scroll along with the rest of the page elements: background-attachment: scroll;

The shorthand Background

The shorthand background property simply combines up the typing of all these property under a single one: background: #eee url("images/html5.png") repeat left bottom;