CSS Background Properties

What They Do:

Every HTML element is a box, and CSS background properties allow us to show a color or image as the background of that box.

background-color: allows us to choose any color code to represent a background color for the element
background-image: allows us to choose any image to be shown as the background for the element
background-repeat: used with an image to turn off tiling the background in one or both directions
background-position: used to specify the location of the image related to the element--it takes two values, the first of which is the horiztonal position and the second of which is the vertical position
The background shorthand property allows us to set as many of these background properties as we want in just one declaration.

The Syntax:

Background-Color Property

background-color: #FF0000;

Background-Image Property

background-image: url('path/to/image/file.ext');

Background-Repeat Property

background-repeat: repeat;
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeaty;

Background-Position Property

background-position: right bottom;
background-position: 5% 25%;
background-position: 5px 25px;

Background Shorthand Property

background: #0000FF url('path/to/image/file.ext') no-repeat center center;