Related Articles

Related Articles

CSS | background-image Property
  • Last Updated : 07 Aug, 2019

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