Difference between background and background-color

  1. 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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <style>
          h1 {
              background-color: blue;
          }
      </style>
        
      <body>
          <h1>
           Geeksforgeeks
      </h1>
      </body>

      chevron_right

      
      


      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:
      filter_none

      edit
      close

      play_arrow

      link
      brightness_4
      code

      <style>
          body {
              background-image: url(gfgpolaroidimagefunction.png);
          }
      </style>
        
      <body>
          <h1>
      Geeksforgeeks
      </h1>
      </body>

      chevron_right

      
      


      Output:

  2. 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.