CSS background-image
CSS

CSS background-image

Mishel Shaji
Mishel Shaji

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

ValueDescription
noneIndicates the absence of background image
urlSpecifies the path of the image
linear-gradientDefines a linear gradient as the background image
radial-gradientDefines 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>

Output