CSS Backgrounds

CSS background property is used to define the background effects on element. There are 5 CSS background properties that affects the HTML elements:

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

    The background-color property is used to specify the background color of the element.

    Example -

    CSS background-image

    The background-image property specifies an image to use as the background of an element.By default, the image is repeated so it covers the entire element.

    The background-image property is used to set an image as a background of an element. By default the image covers the entire element. You can set the background image for a page like this.

    Example -

    Background Image - Repeat Horizontally or Vertically

    By default, the background-image property repeats the background image horizontally and vertically. Some images are repeated only horizontally or vertically.

    The background looks better if the image repeated horizontally only.

    Example -

    If the image above is repeated only horizontally (background-repeat: repeat-x;), the background will look better:

    CSS background-attachment

    The background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window. If you set fixed the background image then the image will not move during scrolling in the browser. Let?s take an example with fixed background image.

    Background - Shorthand property

    To shorten the code, it is also possible to specify all the background properties in one single property. This is called a shorthand property.

    The shorthand property for background is background:

    More Codes