#image #Color #Gradient

CSS

CSS background-image property

Example

Set a background-image for the

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

Try it Yourself »

Example

Set two background images for the

css
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 ❯

Browser Support

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

CSS Syntax

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

Property Values

More Examples

Example

Sets two background images for the

css
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:

css
.hero-image { 
    background-image: url("photographer.jpg");  
    background-color: #cccccc;  
    height: 500px;  
    background-position: center;  
    background-repeat: no-repeat;  
    background-size: cover;
}

Try it Yourself »

Example

Sets a linear-gradient (two colors) as a background image for a

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

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

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

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

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

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