The background-image property is used to specify one or more images to use as the background of an element (see below for setting multiple-images).

By default, the background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally, so that it covers the entire surface area of the element.

The background of an element is the total size of the element, including padding and border, but not including the margin.

The following is an example for specifying the background image values for various element types:

CSS

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
          background-image: url("grass.jpg");
          background-color: green;
        }
        
        h1 {
          background-image: url("frame.png");
          background-color: yellow;
        }
        
        div {
          background-image: url("sand.jpg ");
          background-color: tan;
        }
        
        p {
          background-image: url("stone.jpg");
          background-color: silver;
        }
        
        label {
          background-image: url("water.gif");
          background-color: lightblue;
        }
    </style>
</head>
<body>
    <br/>
    <h1>Hello World</h1>
    <br/>
    <div>This text is inside a div element.
        <p>This paragraph, even though inside a div element, has its own background color.</p>
        This is more text within the div element.
    </div>
    <br/>
    <label>This text is in a label element.</label>
    <br/>
</body>
</html>

Hello World

This text is inside a div element.

This paragraph, even though inside a div element, has its own background color.

This is more text within the div element.

This text is in a label element.

Tip

When using a background-image, take notice of how any text appears, and either use an image that does not disturb the text or change the Color value of the text so that it is more readable.

Notice that the images are not resized by default, therefore if you use a large image on a smaller element surface then only the top left portion of that large image is visible on the element, which may result in undesired results.

Multiple Images

The following example shows how to set two background images for the body element, where sand.jpg is drawn first and then frame.png is drawn ontop of sand.jpg. This example works because frame.png uses an alpha color value that makes the inside of the frame transparent, allowing the sand.jpg to be visible through it:

CSS

<body {
    background-image: url("frame.png"), url("sand.jpg");
}

Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.

CSS Background-Image

Tip

Hello World

Tip

Multiple Images

Hello World!

Final Thoughts

	(0)
	(0)