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;

Property values:

url(‘url’): When the background-image has an URL.

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

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

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

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: 
            }
              
            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
  • Opera 3.5
  • Safari 1.0


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