Cascading Style Sheets/Background

Background properties

There are five properties that control the background of an element:

background-color W3C Specification CSS1 CSS2.1: sets the background color, this will be seen if no background image is specified or the image does not cover the entire element. It will also show through any transparent areas in the image. The color may be set to any CSS color or the keyword transparent.
background-image W3C Specification CSS1 CSS2.1: the image to use as a background.
background-repeat W3C Specification CSS1 CSS2.1: controls the tiling of the background image (possible values: repeat | repeat-x | repeat-y | no-repeat | inherit)
background-attachment W3C Specification CSS1 CSS2.1: does the background scroll with the page (the default) or is it fixed within the viewport?
background-position W3C Specification CSS1 CSS2.1: places the image relative to the element's bounding box.

You should consider supplying a background color as well as a background image in case the user has disabled images.

Examples:

p {
  background-color: #ccc
}

body {
  background-color: #8cf;
  background-image: url(sea.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: bottom
}

Shorthand property

W3C Specification CSS1 CSS2.1

The background shorthand property can be used to set all five individual background properties in a single declaration, e.g.

p {
  background-color: #ccc
}

body {
  background: #8cf url(sea.jpg) no-repeat fixed bottom
}

is equivalent to the previous example.

Note that if some values are omitted from the background property the individual properties for the missing values are set to their initial values. This is important to remember if more than one rule is setting the background properties on an element. For example

div#navigation {
  background: #933
}

is equivalent to

div#navigation {
  background-color: #933;
  background-image: none; /* initial value */
  background-repeat: repeat; /* initial value */
  background-attachment: scroll; /* initial value */
  background-position: 0% 0% /* initial value */
}

Advanced Opacity

Opacity is a block level property that effects all the children. To use colors with alpha channels, see RGBA and HSLA.

Opacity in the background property is still a new concept and is not compliant across all web browsers however here is a tiny bit about this function

filter: alpha(opacity=40); -moz-opacity:.40; opacity:.40;

adding the alpha(opacity=40) will add a 40% alpha transparency however as mentioned this still does not work on all browsers, for this to work on Firefox for example the -moz hack has to be used . So -moz-opacity:.40 will obviously do the same thing but this code is only relevant for Firefox users.

transparency W3C Specification CSS3

External links

A nice demonstration of the effects that can be achieved with backgrounds on css/edge

A nice tutorial on the use of opacity in the background.