# 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

## Background Image — Structure map

Clickable & Draggable!