CSS Background

The CSS background properties are used to define background effects for HTML elements. There are various background properties available, for example background-color, background-image, background-repeat, background-position, background-attachment and more.

1. background-color :

The background-color property is used to specify the background color of an html element. Syntax :
 background-color: color_name;
Example :
<!DOCTYPE>
<html>
<head>
  <title>Background-Color</title>
</head>
<body>
  <p style="background-color: red;">Hello world This is The first Paragraph</p>
  <p style="background-color: orange;">Hello world This is The Second Paragraph</p>
  <p style="background-color: yellow">Hello world This is The Third Paragraph</p>
</body>
</html>
Output :

Hello world This is The first Paragraph
Hello world This is The Second Paragraph
Hello world This is The Third Paragraph

Note that for color values we can also use hex values or rgb color values. For more information about this, look at HTML Colors.


2. background-image : 

The background-image property is used to set the background image of an element. Syntax :
 background-image: url("image_url");
Example :
<!DOCTYPE>
<html>
<head>
  <title>background-Image</title>
  <style>
    body {
     background-image: url("http://mycsnotes.com/picture/image.jpg");
    }
  </style>
</head>
<body>
  <p>Hello world This is The first Paragraph
  Here we are using an image for background
  Test paragraph for background-image
  </p>
</body>
</html>
Output :

Hello world This is The first Paragraph
Here we are using an image for background
Test paragraph for background-image

By default, the image is repeated so it covers the entire element.


3. background-repeat :

By default, the background-image property repeats an image both horizontally and vertically. With background-repeat we can change the repetition or image to just horizontally or vertically. There are two possible values for background-repeat property :

background-repeat: repeat-x;  For repeat image only horizontally.
background-repeat: repeat-y;  For repeat image only vertically.
background-repeat: no-repeat;  Do not repeat the image.

Repeat image Horizontally :
<!DOCTYPE>
<html>
<head>
  <title>background-repeat Horizontally</title>
  <style>
    body {
      background-image: url("http://mycsnotes.com/picture/Capture.jpg");
      background-repeat: repeat-x;
    }
  </style>
</head>
<body>
  <p>Hello world This is The first Paragraph</p>
 </body>
</html>
Repeat image Vertically :
<!DOCTYPE>
<html>
<head>
  <title>background-repeat Vertically</title>
  <style>
    body {
      background-image: url("http://mycsnotes.com/picture/Capture.jpg");
      background-repeat: repeat-y;
    }
  </style>
</head>
<body>
   <p>Hello world This is The first Paragraph</p>
</body>
</html>
Do not repeat image :
<!DOCTYPE>
<html>
<head>
  <title>background-repeat No-repeat</title>
    <style>
      body {
        background-image: url("http://mycsnotes.com/picture/Capture.jpg");
        background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <p>Hello world This is The first Paragraph</p>
</body>
</html>


4. background-position :

The background-position property is used to control the position of an image in the background. We can set image in different position like left, right, center, top, bottom. Syntax :
 background-position: right top;
Example :
<!DOCTYPE>
<html>
<head>
  <title>background-position</title>
  <style>
    body {
      background-image: url("http://mycsnotes.com/picture/Capture.jpg");
      background-repeat: no-repeat;
      background-position: center top;
    }
  </style>
</head>
<body>
  <p style="text-align:center;">Hello world This is The first Paragraph
  Here we are using an image for background
  Test paragraph for background-image
  </p>
</body> </html>
Output :

Hello world This is The first Paragraph
Here we are using an image for background
Test paragraph for background-image


5. background-attachment :

The background-attachment property is used to set background-image in different type attachment like fixed, scroll etc. Where fixed value is used to fix image (will not scroll with the rest of the page) and scroll is used to scroll the image within page.

Example :
body {
  background-image: url("http://mycsnotes.com/picture/Capture.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
} 
body {
  background-image: url("http://mycsnotes.com/picture/Capture.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: scroll;
} 


6. Background - Shorthand property :

The background shorthand property is used to specify all the background properties in one single property. The shorthand property for background is defined by background. Example :
<!DOCTYPE>
<html>
<head>
  <title>background-position</title>
  <style>
    body {
      background: #ffa500 url("http://mycsnotes.com/picture/Capture.jpg") no-repeat fixed center top;
    }
  </style>
</head>
<body>
   <p style="text-align:center;">Hello world This is The first Paragraph
   Here we are using an image for background
   Test paragraph for background-image
   </p>
</body>
</html>
Output :


Hello world This is The first Paragraph
Here we are using an image for background
Test paragraph for background-image

Also note that when using the shorthand property the order of the property values is:

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

It does not matter if one of the property values is missing, as long as the other ones are in this order.

Next Topic :