We talked before about Background color
Background image
We can add image as background of an element By default, the image is repeated so it covers the entire element.
body {
background-image: url("paper.gif");
}The background image can also be set for specific elements, like the <p> element.
Background repeat
By default, the background-image property repeats an image both horizontally and vertically.
To make image only repeated horizontally
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}Tip: To repeat an image vertically, set background-repeat: repeat-y;
To make no-repeat
background-repeat: no-repeat;background-position
The background-position property is used to specify the position of the background image.
background-position: right top;background-attachment
The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page):
background-attachment: fixed; /*fixed*/
background-attachment: scroll;background - Shorthand
background: #ffffff url("img_tree.png") no-repeat right top;When using the shorthand property the order of the property values is:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
Other
| Property | Description |
|---|---|
| background | Sets all the background properties in one declaration |
| background-attachment | Sets whether a background image is fixed or scrolls with the rest of the page |
| background-clip | Specifies the painting area of the background |
| background-color | Sets the background color of an element |
| background-image | Sets the background image for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-position | Sets the starting position of a background image |
| background-repeat | Sets how a background image will be repeated |
| background-size | Specifies the size of the background image(s) |