CSS provides various properties for styling the background of an element. The following are the various CSS properties you can use to style the background of any HTML element.
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
CSS background-color:
The background-color property is used to set the background color of an HTML element.
The below example has shown, how to set the background color of a web page.
Note: In the above example, we take background-color: yellow, instead of color name (yellow), you can take its RGB value or HEX value also.
CSS background-image:
To set a background image to an element, use the background-image property. By default, the image covers the entire element.
CSS background-repeat:
By default, the background-image property repeats a background image both horizontally and vertically.
By using the 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.
Example:
If you want above image is repeated only vertically use (background-repeat: repeat-y;)
Example:
If you want above image is repeated only horizontally use (background-repeat: repeat-x;)
Example:
If you want to show the background image only once use (background-repeat: no-repeat;)
CSS background-position:
The background-position property is used to set the position of the background image. If no background-position has been set, the background image is placed on the top-left of the webpage.
You can set the following positions:
- center
- top
- bottom
- left
- right
CSS background-attachment:
The background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls with the outer container.
The Background Shorthand Property:
The background property is a shorthand property to set all the background properties, which are background-color, background-image, background-repeat, background-attachment, and background-position at once.
CSS background-clip Property:
The background-clip property, which describes how far the background (color or image) should extend within an element.
This property has five values: border-box, padding-box, content-box, initial, or inherit.
CSS background-origin Property:
By using, background-origin property you can set the origin position of that background image.
It has five values: border-box, padding-box, content-box, initial, or inherit.
CSS background-size Property:
You can set the size of a background image by using the background-size property.
The property has five values: auto, cover, contain, initial, inherit, or value (in px or percentage).