CSS Background

The properties of CSS background are applied to describe the effects of background on the element. Here are five properties of background that affects various elements of HTML:

  • Background-color
  • Background-image
  • Background-repeat
  • Background-attachment
  • Background-position

Background-color

The color of the background element is specified by using this property. An example for setting background-color is given below:

Example:

CSS Background

Background-image

When we want to insert an image as the background of HTML element, we can use background-image property. The image will be repeated and will cover all the elements.  An example of adding image in background is as follows:

Example:

CSS Background

Background-repeat

As discussed in the background-image property, background-image repeats the image vertically and horizontally. A few images in the background are repeated both vertically and horizontally. But, the background appears better when the image has horizontal repetition only.

Example: repeat-x;

CSS Background

Example: repeat-y;

CSS Background

Background-attachment

It is applied to define the background image, which is scroll or fixed with the page rest in the browser window. When we fixed the image in the background, the image can’t move at the time of scrolling inside the browser. The following example will clear this concept.

Example: fixed

CSS Background

Example: scroll

CSS Background

Background-position

This property of CSS is applied to describe the basic position of an image in the background. A background picture is positioned on the top-left side of the webpage. We can arrange some positions by using the above property as follows:

  1. top
  2. bottom
  3. center
  4. left
  5. right

Example: center

CSS Background

Pin It on Pinterest

Share This