CSS background Property

The background property defines the background of an element.

This can include a color, an image, a color gradient, and more.

Example

#

An element with both a color and an image background.

<style>
  .image-color {
    background: #d2c54b url("/img/css/sunflowers.jpg") no-repeat right;
    height: 250px;
    padding: 35px;
  }
</style>

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

Code Explanation

The color fills the space that is not covered by the image.

url("/img/css/sunflowers.jpg") points to the background image.

no-repeat specifies that the background image is not repeated.

right places the background image to the right of the element.


Using background

The background property adds a background to an element.

This property is a shorthand for several properties:

Multiple backgrounds can be assigned to an element with this property.

Syntax

background: bg-color bg-image position/bg-size bg-repeat
            bg-origin bg-clip bg-attachment | initial | inherit;

Values

#

Value Description
background-color Sets the background color
background-image Sets one or more background images
background-position Sets the background-position
background-size Sets the background-size
background-repeat Sets the background-repeat behavior
background-origin Sets the background positioning area
background-clip Sets the background painting area
background-attachment Sets whether background is fixed or scroll with the rest of the page
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

Did you know?

Did you know?

Background opacity

The background property can specify a transparent background.

Simply use the rgba function to create a transparent color.

An element with a white background that is 50% transparent.

Background is white with 50% opacity.
<style>
  .bg {
    background: lightblue;
    padding: 20px;
  }

  .opaque {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 20px;
  }
</style>

<div class="bg">
  <div class="opaque">
    Background is white with 50% opacity.
  </div>
</div>

Browser support

This table shows when background 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

Guides