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.
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.
To set a background image to an element, use the background-image property. By default, the image covers the entire element.
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.
If you want above image is repeated only vertically use (background-repeat: repeat-y;)
If you want above image is repeated only horizontally use (background-repeat: repeat-x;)
If you want to show the background image only once use (background-repeat: no-repeat;)
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:
The background-attachment property determines whether the background image is fixed with regard to the viewport or scrolls with the outer container.
In this example, the background image should be fixed.
In this example, the background image should be scroll.
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).