CSS | background-image Property

The background-image property is used to set one or more background images to an element. By default, it places the image on the top left corner. To specify two or more images, separate the URLs with a comma.

Syntax:

background-image: url('url')|none|initial|inherit;
  1. url(‘url’): When the background-image has an URL.
  2. Syntax:

    background-image: url('url')

    Example-1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>background-image property</title>
        <style>
            body {
                
                background-image: 
            }
              
            h1,
            h3 {
                color: green;
            }
              
            body {
                text-align: center;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>background-image:url;</h3>
        <div>GeeksforGeeks: A computer science portal for geeks</div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:



  3. none:By using this property no background image will be displayed and this is by default
  4. Syntax:

    background-image: url('url') none

    Example-2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>background-image property</title>
        <style>
            body {
                background-image: 
                  none;
            }
              
            h1,
            h3 {
                color: green;
            }
              
            body {
                text-align: center;
            }
        </style>
    </head>
      
    <body>
        <h1>GeeksforGeeks</h1>
        <h3>background-image:url none;</h3>
        <div>GeeksforGeeks: A computer science portal for geeks</div>
    </body>
      
    </html>

    chevron_right

    
    

    Output:

  5. initial: It sets the property to its default value.

Syntax:

background-image: url('url') default

Example-3

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>CSS background-image property</title>
    <style>
        body {
            background-image: 
              initial;
        }
          
        h1,
        h3 {
            color: green;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h3>CSS background-image:url initial;</h3>
    </center>
  
</body>
  
</html>

chevron_right


Output:

Supported Browsers: The browser supported by background-image Property are listed below:

  • Google Chrome 1.0
  • Edge 4.0
  • Firefox 1.0
  • Safari 1.0
  • Opera 3.5


  • My Personal Notes arrow_drop_up


    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.



    Improved By : shubham_singh