YouTipCss Background
# CSS Backgrounds
CSS background properties are used to define the background effects of an element.
CSS properties used for background effects:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
## background-color
The background-color property specifies the background color of an element.
The background color of the page is set in the body selector:
```css
body {background-color:gray;}
```
The background color of the h1, p elements can also be set:
```css
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
```
## background-image
The background-image property describes the background image of an element.
By default, the background image is tiled to cover the entire element.
Set the background image for the page:
```css
body {background-image:url('paper.gif');}
```
## background-repeat
By default, the background-image property tiles the image both horizontally and vertically.
Some images should only be tiled horizontally or vertically.
Set background-image to repeat only horizontally (repeat-x):
```css
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
```
You can use background-repeat:repeat-y to make it repeat vertically:
```css
body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}
```
## background-position
Change the position of the image, using background-position property:
```css
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
```
The page will look like this:
You can save the above two lines of code into a shorthand property background. This way the code is more concise.
## background - Shorthand property
As you can see from the examples above, there are many properties to consider when dealing with backgrounds. To shorten the code, it is also possible to specify all the properties in a single property. This is called a shorthand property.
The shorthand property for background is simply "background":
```css
body {background: #ffffff url('img_tree.png') no-repeat right top;}
```
When using the shorthand property, the order of the property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
It doesn't matter if one of the property values is missing, as long as the other values are in this order.
## More Examples
How to add multiple background images:
```css
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
```
How to set a fixed background image (this image will not scroll with the rest of the page):
```css
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-attachment:fixed;
}
```
All CSS Background Properties
| Property | Description |
| --- | --- |
| background | Sets all 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 of an element |
| background-origin | Specifies where the background image is 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 a background image |
## CSS Quiz
Test your CSS skills at .
[Start CSS Quiz!]