Background Image

  • Specifies an image to use as the background of an element.
  • By default, the image is repeated so it covers the entire element.
  • //the background image for a page can be set like this body { background-image: url("paper.gif"); }.

Background Image - Repeat Horizontally or Vertically

  • By default, the background-image property repeats an image both horizontally and vertically.
  • To repeat an image vertically, set background-repeat: repeat-y;.
  • To repeat an image horizontally, set background-repeat: repeat-x;.

Background Image - Set position and no-repeat

//the position of the image is specified by the background-position property

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

Showing the background image only once is also specified by the background-repeat property.

Background Image - Fixed position

body {
  background-image: url("img_tree.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed;
}

To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property.

Background Image — Structure map

Clickable & Draggable!

Background Image — Related pages: