CSS Background
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.:
With
CSS, a color is most often specified by:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a color name - like "red"
Look
at CSS Color Values for
a complete list of possible color values.
Background
Image
The
background-image property specifies an image to use as the background
of an element.
By
default, the image is repeated so it covers the entire element.
Background
Image - Repeat Horizontally or Vertically
By
default, the background-image property repeats an image both
horizontally and vertically.
Background
Image - Set position and no-repeat
Note: When
using a background image, use an image that does not disturb the text.
Showing
the image only once is specified by the background-repeat property:
The
position of the image is specified by the background-position property:
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
one single property. This is called a shorthand property.
The
shorthand property for background is simply "background":
When
using the shorthand property the order of the property values is:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
It
does not matter if one of the property values is missing, as long as
the ones that are present are in this order.
|