CSS background-image

The background-image CSS property is used to set one or more background images for an element. By default, a background image is placed at the top-left corner of the element.

Syntax

background-image: image-url|none;

Values

Value	Description
none	Indicates the absence of background image
url	Specifies the path of the image
linear-gradient	Defines a linear gradient as the background image
radial-gradient	Defines a radial gradient as the background image

Things to remember

The border of the element is drawn on top of the background image.
By default, a background image is placed at the top-left corner of the element.
Developers should always specify background-color so that the background color will be displayed if the image failed to load for some reasons.

Example – single image

<!DOCTYPE html>
<html>
<head>
    <title>CSS background image</title>
    <style>
    body{
        background-image: url('mist.jpeg');
        background-color: white;
    }
    </style>
</head>
<body>
</body>
</html>

Output

In this example, you might have noticed that the image appears repeatedly on x-axis and y-axis. To add an image that spans the entire element, you should use background-repeat and background-size properties.

Example – A full width image

<!DOCTYPE html>
<html>
<head>
    <title>CSS background image</title>
    <style>
    body{
        background-image: url("mist.jpeg");
        background-repeat: no-repeat;
        background-size:cover;
        background-color: white;
    }
    </style>
</head>
<body>
</body>
</html>

Output

Adding multiple images

You can set more than one background image for an element. If more than one background image is specified, the background images are drawn on top of each other. The first specified image is drawn as if it is closest to the user.

Example – multiple background images

<!DOCTYPE html>
<html>
<head>
    <title>CSS background image</title>
    <style>
    body{
        background-image: url("logo.png"), url("mist.jpeg");
        background-repeat: no-repeat, no-repeat;
        background-color: white;
    }
    </style>
</head>
<body>
</body>
</html>

CSS background-image

Syntax

Values

Things to remember

Example – single image

Output

Example – A full width image

Output

Adding multiple images

Example – multiple background images

Output

Subscribe

You might also like