2.8 KiB
title
| title |
|---|
| CSS3 Backgrounds |
CSS3 Backgrounds
The CSS background shorthand property is used to define multiple properties like :
background-color, background-image, background-repeat, background-attachment and background-position
Background Color
The background-color property specifies the background color of an element.
background-color : #F00;
Background Image
The background-image property specifies an image to use as background of an element.
By default, the image repeats itself to cover the entire surface of the element.
background-image: url("GitHub-Mark.png");
Background Image - Repetition
By default, the background-image property repeats on the X and Y axis, to cover the area of its container.
If you want to set an axis, like X axis, use background-repeat property type:
background-image: url("GitHub-Mark.png");
background-repeat: repeat-x;
But sometimes you don't want to have your background image cover the whole surface, so you've to specify it by typing:
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
Background Image - Position
You can specify the position of the background by typing :
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position : left bottom;
It will set your background image at the bottom left of the element.
Background Image - Fixed Position
If you do not want the background image to scroll with the rest of the page, use the background-attachement property:
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
Shorthand property
You can pass all the properties in one super-property:
background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
When you use this shorthand property, it must be in this order:
- Background color
- Background image
- Background repeat
- Background attachment
- Background position
It doesn't matter if one property is missing, so long as the order is maintained:
background: url("GitHub-Mark.png") no-repeat left bottom;
This will work even if the color and the attachment are missing.
Multiple Backgrounds
You can pass in multple background images and set their properties simultaneously.
background-image: url("firstimage.jpg"), url("secondimage.jpg");
background-repeat: no-repeat, repeat;
background-position: left bottom, right bottom;
You can add individual properties to individual images in their respective order.