CSS-Background

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

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

    The use of background-color property is to specify the background color of an element

    The background color of a page is set like this:

    Example :-

    Following is the example of embed CSS based on the above syntax

    Result

    This text has a yellow background color.

    CSS background-image

    We use CSS background-image property to set an image as a background of an element. The image covers the entire element by default. You can set the background image for a page like this.

    Example :-

    Result

    Hello World!

    CSS background-repeat

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

    If the image repeated horizontally only ,It looks better

    Example :-

    Result

    dwtutorials

    CSS background position

    The background-position property in CSS is used to define the initial position of the background image.The background image, by default, is placed on the top-left of the webpage.

    Example

    Result

    Tutorials point

    CSS background-attachment

    We use the background-attachment property to specify if the background image is fixed or scroll with the rest of the page in browser window. The image will not move during scrolling in the browser If you set fixed the background image .

    Example

    Result

    The background-image is fixed. Try to scroll down the page.

    The background-image is fixed. Try to scroll down the page.

    The background-image is fixed. Try to scroll down the page.

    The background-image is fixed. Try to scroll down the page.