CSS background-image Property

Posted on by mtoplistChuyên mục:Top List

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.

Show demo ❯

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

Browser Support

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

Property

background-image
1.0
4.0
1.0
1.0
3.5

Note: IE8 and earlier do not support multiple background images.

CSS Syntax

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

Property Values

More Examples

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

Use different background properties to create a “hero” image:

.hero-image {
  background-image: url(“photographer.jpg”); /* The
image used */
  background-color: #cccccc; /* Used if the image is
unavailable */
  height: 500px; /* You must set a specified height */
 
background-position: center; /* Center the image */
 
background-repeat: no-repeat; /* Do not repeat the image */
 
background-size: cover; /* Resize the background image to cover the entire container */
}

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

The repeating-linear-gradient() function is used to repeat linear gradients:

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

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 »

Example

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

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

Try it Yourself »

Example

The repeating-radial-gradient() function is used to repeat radial gradients:

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

Try it Yourself »

Related Pages

CSS tutorial: CSS Background,
CSS Backgrounds (advanced),
CSS Gradients

HTML DOM reference: backgroundImage property

mtoplist