CSS BACKGROUND
CSS background properties are used to style background of HTML element.There are 5 different CSS background property:
- CSS background color
- CSS background image
- background repeat
- background attachment
- CSS background position
1).CSS background color
background-color is a CSS property that is used to define the background color of any HTML element.You can specify color value in any way like rgb,hex,hsl or color-name itself.
Example
2).CSS background image
background-image is a CSS property that is used to define background color of any HTML element.Path of image is given using url() property.
background-image:url('path_of_image')
Example
3).background repeat
background-image repeats itself both horizontally and vertically by default.So either to avoid repetition or to direct repetition in one direction we use background-repeat property.
We use background-repeat: repeat-x; to repeat background-image in x direction.
Example
We use background-repeat: repeat-y; to repeat background-image in y direction.
Example
We use background-repeat: no-repeat; for background-image not to repeat in any direction.
Example
4).background attachment
This property specifies whether the background-image will scroll or be fixed relative to the webpage.
Example
5).CSS background position
This property define initial position of background-image on the web page.By default image starts from top-left cornor.
We can have background-position values like top,bottom,left,right,center etc.
Example