CSS background-image Property

Example

Set a background-image for the <body> element:

body {
background-image: url(“paper.gif”);
background-color: #cccccc;
}

Try it Yourself »

Example

Set two background images for the <body> element:

body {
background-image: url(“img_tree.gif”), url(“paper.gif”);
background-color: #cccccc;
}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

The background-image property sets one or more background images for an element.

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

Tip: The background of an element is the total size of the element, including padding and border (but not the margin).

Tip: Always set a background-color to be used if the image is unavailable.

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1 + new values in CSS3
JavaScript syntax: object.style.backgroundImage=”url(img_tree.gif)”
Try it

CSS Syntax
background-image: url|none|initial|inherit;
Property Values
Value Description
url(‘URL‘) The URL to the image. To specify more than one image, separate the URLs with a comma
none No background image will be displayed. This is default
linear-gradient() Sets a linear gradient as the background image. Define at least two colors (top to bottom)
radial-gradient() Sets a radial gradient as the background image. Define at least two colors (center to edges)
repeating-linear-gradient() Repeats a linear gradient
repeating-radial-gradient() Repeats a radial gradient
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

Example

Sets two background images for the <body> element. Let the first image appear only once (with no-repeat), and let the second image be repeated:

body {
background-image: url(“img_tree.gif”), url(“paper.gif”);
background-repeat: no-repeat, repeat;
background-color: #cccccc;
}

Try it Yourself »

Example

Sets a linear-gradient (two colors) as a background image for a <div> element:

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow);
}

Try it Yourself »

Example

Sets a linear-gradient (three colors) as a background image for a <div> element:

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: linear-gradient(red, yellow, green);
}

Try it Yourself »

 

Example

Sets a radial-gradient (two colors) as a background image for a <div> element:

#grad1 {
height: 200px;
background-color: #cccccc;
background-image: radial-gradient(red, yellow);
}

Try it Yourself »