tutorialstonight logo
A Platform To Learn To Code

CSS BACKGROUND



CSS background properties are used to style background of HTML element.There are 5 different CSS background property:

  1. CSS background color
  2. CSS background image
  3. background repeat
  4. background attachment
  5. 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

Run the code

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

Run the code

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

Run the code

We use background-repeat: repeat-y; to repeat background-image in y direction.

Example

Run the code

We use background-repeat: no-repeat; for background-image not to repeat in any direction.

Example

Run the code

4).background attachment

This property specifies whether the background-image will scroll or be fixed relative to the webpage.

Example

Run the code

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

Run the code