CSS background-image Property

The background-image property specifies background images for elements. There can be used one or more images.

By default, a background-image is vertically and horizontally repeated and placed at the top-left corner of the element.

The background of an element is the total size of it including padding and border (not margin).

If the image is unavailable, you need to specify a background-color.

Initial Value	none
Applies to	All elements. It also applies to ::first-letter and ::first-line.
Inherited	No.
Animatable	No.
Version	CSS1 + some new values in CSS3
DOM Syntax	object.style.backgroundImage = "url(img_tree.png)";

Syntax

background-image: url | none | linear-gradient | radial-gradient | repeat-linear-gradient | repeat-radial-gradient | initial | inherit;

Example of the background-image property:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png");
        background-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Background-image property example</h2>
    <p>Hello World!</p>
  </body>
</html>

Try it Yourself »

Result

See another example where two images are used and they are specified with the help of the background-position property.

Example of the background-image property with other background properties:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        padding: 100px;
        background-image: url("/uploads/media/default/0001/02/55a2f152f59bf42a99b576d44a4578ec9daa0ab6.png"), url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg");
        background-attachment: fixed;
        background-position: 5px 50px;
        background-repeat: no-repeat, repeat;
      }
    </style>
  </head>
  <body>
    <h2>Background-image property example</h2>
    <p>The background image is positioned 5px from the left, and 50px down from the top.</p>
  </body>
</html>

Try it Yourself »

In this example a "linear-gradient" with two colors is specified as a background image for a <div> element:

Example of the background-image property with the "linear-gradient" value:

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        height: 300px;
        background-image: linear-gradient(#eee, #1c87c9);
      }
    </style>
  </head>
  <body>
    <h2>Linear gradient as a background image example</h2>
    <p>This linear gradient starts at the top. It starts gray, transitioning to blue:</p>
    <div></div>
  </body>
</html>

Try it Yourself »

Example of the background-image property with the "repeating-radial-gradient" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      div {
        height: 300px;
        background-color: #cccccc;
        background-image: repeating-radial-gradient(#8ebf42, #eee 15%, #ccc 30%);
      }
    </style>
  </head>
  <body>
    <h2>Radial gradient as a background image example</h2>
    <div></div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
url	Defines the url of the image. It can be specified more then one image separated by commas.
none	There will not be any background image. It is the default value.
linear-gradient	A linear gradient is specified as the background image.
radial-gradient	A radial gradient is specified as the background image.
repeat-linear-gradient	Repeats a linear gradient.
repeat-radial-gradient	Repeats a radial gradient.
initial	Sets the property to its default value.
inherit	Inherits the property from its parent element.