HtmlCssMonk

Background in CSS | Learn Basic CSS

computer, computers, computer technology

DESCRIPTION

CSS background property allows us to specify background effects on an element.

There are 5 background properties that affects an HTML element –

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

Background-Color

Background-color property specifies the background color of an element.

Example –

<!DOCTYPE html>  
<html>  
    <head>  
        <style>  
           h2 , p {  
            background-color: #b0d4de;  
                  }  
         </style>  
    </head>  
    <body>  
          <h2>Hello Monks.</h2>  
          <p>Hello HtmlCssMonk. This is an example of CSS background-color.</p>  
    </body>  
</html>   

This Code will produce the following result on your webpage –


Background-Image

Background-image property is used to set an image as the background of an element.

Example –

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-image: url("blur.jpg");
      margin-left: 80px;
    }
  </style>
</head>

<body>
  <h1>HtmlCssMonk</h1>
  <h2>Learn like a Monk</h2>
</body>

</html>

This Code will produce the following result on your webpage –

Note When using a background image, use an image that does not disturb the text.


Background-repeat

By default, the background-image property repeats the background image horizontally and vertically.

Example –

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-image: url("hcm.png");
      background-repeat: repeat-x;
    }
  </style>
</head>

<body>
</body>

</html>

repeat-x repeats the image only horizontally.

This Code will produce the following result on your webpage –

NOTE – repeat-y repeats the image only vertically.


Background-Attachment

Background-attachment property is used to specify if the background image is fixed or scroll with the rest of the page in browser window.

Example –

To make background Image fixed ( will not scroll with the rest of the page ) –

body {
  background-image: url("animal.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}

To make background Image scroll with rest of the page –

body {
  background-image: url("animal.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

Background-Position

Background-position property is used to define the initial position of the background image. By default, the background image is placed on the top-left of the webpage.

Example –

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      background-image: url("hcm.png");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: center;
    }
  </style>
</head>

<body>
</body>

</html>

This Code will produce the following result on your webpage –


Next topic – Positions in CSS

Previous topic – Borders in CSS


Leave a Comment

Your email address will not be published. Required fields are marked *