CSS background properties are used to define background styles for the elements.
The CSS provide several properties for styling the background of an element, like:
background-position. The following section will describe you how to use these properties to set the different styles for the backgrounds one by one.
background-color property is used to set the background color of an element.
The example below demonstrates, how to set the background color of a web page.
Colors in CSS most often specified by the following methods:
- a HEX value - like "#ff0000"
- an RGB value - like "rgb(255,0,0)"
- a color name - like "red"
Look at CSS Color Names for a complete list of possible color names.
background-image property set an image as a background of an HTML element.
See the example below which demonstrates how to set the background image for a page.
By default the
background-image property repeats an image both horizontally and vertically.
background-repeat property you can control how a background image is tiled in the background of an html element. You can set a background image repeat vertically (y-axis), horizontally (x-axis), in both directions, or in neither direction.
See the example below which demonstrates how to set the gradient background for a web page by repeating the sliced image horizontally.
background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls along with the containing block.
background-position property is used to control the position of the background image.
background-position has been specified, the image is placed at the default top-left position of the element i.e. at
(0,0). See the example below:
In the following example, the background image is positioned at top-right corner and the position of the image is specified by the
background-position: 100% top;
The Background Shorthand Property
As you can see from the examples above, there are many properties to consider when dealing with the backgrounds. It is also possible to specify all these properties in one single property, to shorten the code. This is called a shorthand property.
background property is a shorthand property for setting all the individual background properties (i.e.,
background-position) at once. For example:
background-position: 250px 25px;
Using the shorthand notation the above example can be written as:
background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px;
When using the
background shorthand property the order of the property values should be.
If the value for an individual background property is missing or not specified while using the shorthand notation, the default value for that property will be used instead, if any.
Note: The background properties do not inherit, but the parent element's background will be visible through by default because of the initial (i.e. default)
transparent value of the
background CSS property.