Categories
CSS Tutorials

Background

introduction
Formatting Text
Box Model
Advanced selectors
More about CSS

Background property is very useful to set background effects of HTML elements. There are so many background properties to design the background of your webpage.

background-color property

This property specifies the background color of HTML element. As we discuss in color property here also we can use color name, RGB color, Hex values, or HSLA.

Syntax:

h1{
  background-color: colour_name;
}

Example:

<html> 
  <head>
      <style>
          h1 {
              background-color: blue;
          }
      </style></head>
   
  <body>
      <h1>Edupoly Training and Development</h1></body> 
</html>

Output:

background-image property

This property is used to set an image as a background image. By default that image will repeat the element to cover it.

Syntax:

body{
  background-image: url(path);
}

Example:

<html>
    <head>
        <style>
            body {
                background-image: url("images/image.jpg");
                text-align: center;
            }
            h1{
                color: lime;
            }
        </style>
    </head>
    <body>
        <h1>Edupoly Training and Development</h1>
    </body>
</html>

Output:

Note: In this example we have saved the image in the images folder. We can also give the image url.

background-repeat property

By default the image will repeat horizontally and vertically to cover it. We can make the image stretch to cover the HTML element. It has different values to make the image fit. 

Syntax:

body{
	background-image: url(path);
	background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
}

Example:

<html>
    <head>
        <style>
            body {
                background-image: url("images/image.jpg");
                background-repeat: repeat-x;
            }
            h1{
                color:lime;
            }
        </style>
    </head>
    <body>
        <h1>Edupoly Training and Development</h1>
    </body>
</html>

Output:

background-attachment

This property specifies whether the image scrolls with the page or not. If you give this value to an image, you can feel this when the content is more than the image height. 

Syntax:

body {
   background-attachment: scroll|fixed|local|initial|inherit;
}

Example:

<html>
    <head>
        <style>
            body {
                background-image: url("images/image.jpg");
                background-attachment: fixed;
                height:200%;
            }
            h1{
                color:lime;
            }
        </style>
    </head>
    <body>
        <h1>Edupoly Training and Development</h1>
        <p>
            ...long content...
        </p>
    </body>
</html>

background-position property

This property is used to set the image at a particular position. In this, we must specify where we want to set the image position in the HTML element. By default, a background-image is placed at the top-left corner of an element.

Syntax:

body {
  background-repeat:no repeat;
  background-position:left top;
}

Example:

<html>
    <head>
        <style>
            body {
                background-image: url("images/image.jpg");
                background-repeat: no-repeat;
                background-position: center;
            }
        </style>
    </head>
    <body>
        <h1>Edupoly Training and Development</h1>
    </body>
</html>

Output: