Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

CSS background-image

The background-image property sets the element's background image.

By default, the image repeats vertically and horizontally.

This property can also specify a color gradient.

Example

#

An element with a background-image.

<style>
  .bg-image {
    background-image: url("/img/css/sunflowers.jpg");
    height: 200px;
  }
</style>

<div class="bg-image"></div>

Multiple images

The background can also be defined by multiple images which are then stacked on top of each other. With transparent images interesting effects can be obtained.

<style>
  .bg-image-multiple {
    background-image: url("/img/css/vangogh.jpg"), 
                      url("/img/css/church-at-auvers.jpg");
    background-repeat: no-repeat;
    height: 350px;
  }
</style>

<div class="bg-image-multiple"></div>

Syntax

background-image: url(url) | none | linear-gradient() | radial-gradient() |
                  repeating-linear-gradient() | repeating-radial-gradient() |
                  inherit;

Values

#

Value Description
url Image URL or file path. When using multiple images, separate URLs with a comma
none Default. No background will be used
linear-gradient() Sets linear gradient with at least two colors (top to bottom)
radial-gradient() Sets radial gradient with at least two colors (center to edges)
repeating-linear-gradient() Repeats linear gradient
repeating-radial-gradient() Repeats radial gradient
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different background-image values.

<style>
  .bg-example {
    background-image: linear-gradient(orangered, purple);
    height: 200px;
  }
</style>

<div class="bg-example"></div>

Browser support

This table shows when background-image support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
4.0 Sep 1997
Opera
3.5 Nov 1998
Safari
1.0 Jun 2003

You may also like


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides