CSS Property background-image

The background-image property sets element background images.

Summary

Initial value: none
Inherited: no
CSS Version: CSS1
JavaScript syntax: object.style.backgroundImage="url(yourImage.gif)"
Animatable: no

CSS Syntax

background-image: url|none|initial|inherit;

Property Values

url('URL'): Image URL. To specify more than one image, separate the URLs with comma.
none: (Default.) No background image.

Browser compatibility


`background-image`	Yes	Yes	Yes	Yes	Yes

Example

<!DOCTYPE html>
<html>
<head>
<style> 
body {<!--from  w w w  . j a v a2  s  .co m-->
    background-image: url("http://placehold.it/20x20"), url("http://placehold.it/21x21");
    background-color: #EEE;
}
</style>
</head>
<body>

</body>
</html>

Click to view the demo

Example 2

The background-image property marks an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

The background image for a paragraph can be set like this:

p {background-image:url('yourImageName.gif');}

Here is the full source code.

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style type="text/css"> 
        p { <!--from  w ww  .ja  v a2s.co  m-->
           background-image: url('http://java2s.com/style/download.png'); 
        } 
        </style> 
    </head> 
    <body> 
        <p> 
            HyperText Markup Language (HTML)
        </p> 
    </body> 
</html>

Click to view the demo