CSS background-image Property

Definition and Usage

background-image Sets a background image for the element.

The background of the element occupies the full size of the element, including padding and border, but not including margin.

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

Tip:Please set a background color that is available, so that the page can have a good visual effect if the background image is not available.

Detailed Description

The background-image property sets an image in the background of the element.

According to background-repeat The value of the property, the image can be tiled infinitely, tiled along an axis (x-axis or y-axis), or not tiled at all.

The initial background image (original image) is based on background-position Placement of the value of the property.

See Also:

CSS Tutorial:CSS Background,CSS Background (Advanced),CSS Gradient

HTML DOM Reference Manual:backgroundImage Property

Example

Set the image as the page background:

body
  { 
  background-image: url(bgimage.gif);
  background-color: #000000;
  }

Try It Yourself

CSS Syntax

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

Property Value

Property Value

Value Description
url('URL) The path to the image.
none Default Value. No background image is displayed.
inherit Specifies that the background-image property settings should be inherited from the parent element.

Technical Details

Default Value: none
Inheritance: no
Version: CSS1
JavaScript Syntax: object.style.backgroundImage="url(stars.gif)"

Browser Support

The numbers in the table indicate the first browser version that fully supports this property.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5