Background-image

The background-image property sets background image for an element.

We can set the background image of an element with the specified "url".

A "url" value specifies the location where the image can be found.

By default the background-image is placed on the top-left (background-position) of the element and repeated (vertically and horizontally).

We need to set a background-color property together with background-image property in case the image is unavailable.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/01/a1d4caa225542c577689287a36f4209808b08c19.jpeg");
      }
    </style>
  </head>
  <body>
    <h1>Background image</h1>
    <h2>This is some heading as an example.</h2>
    <p>Some paragraph as an example.</p>
  </body>
</html>

Here is the result:

Property Values

Value Description
url Specifies the image location.
none No background image will be displayed. This is default.
initial It makes the property to use its default value.
inherit It inherits the property from its parent element.