Skip to content
Related Articles

Related Articles

Difference between background and background-color

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Jul, 2019
View Discussion
Improve Article
Save Article
  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:




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

  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:




    <!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 arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!