Difference between background and background-color

Last Updated : 16 Jul, 2019

Background Property
The background property in CSS is very commonly used and contains many variants. The background property consists of all the following properties:
- background-color
- background-image
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
Background Color:
Syntax:
```
body
{
   background-color:color name
}
```
A color name can also be given as: “green”, a HEX value as “#5570f0”, an RGB value as “rgb(25, 255, 2)”.
- Example:
  <style>
      h1 {
          background-color: blue;
      }
  </style>
  
  <body>
      <h1>
       Geeksforgeeks
  </h1>
  </body>
  Output:
  
  Background Image: This property specify an image to use as the background of an element. By default, the image is repeated so it covers the entire element.
  Syntax:
```
body
{
   background-image : link;
}
```
- Example:
  <style>
      body {
          background-image: url(gfgpolaroidimagefunction.png);
      }
  </style>
  
  <body>
      <h1>
  Geeksforgeeks
  </h1>
  </body>
  Output:

Background-color Property:
The background-color property in CSS is used to specify the background color of an element. On the other hand, if you only use “Background:” Property, you can either specify it’s valued as an image URL or as a color code or specify the value of each background property in the below-given order.

Syntax:

element {
    background-color property
}

Example:

<!DOCTYPE html> 
<html> 
    <head> 
        <title>background-color property</title> 
        <style>  
            body { 
                text-align:center; 
                background-color:green; 
            } 
            h1 {  
                color:white; 
                background-color:blue; 
            }  
            h2 { 
                color:white; 
                background-color:black; 
            } 
        </style>  
    </head> 
    <body>  
        <h1>Geeksforgeeks </h1>  
        <h2>background-color: color_name;</h2>      
    </body>  
</html>

Output:

My Personal Notes

Related Articles

Difference between background and background-color