CSS Backgrounds

An <input> element with a background-color.

<style>
  .bg-color {
    background-color: #dfe7ff;
  }
</style>

<input type="text" class="bg-color"
       placeholder="Enter your name">

The background property sets these properties in order:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

Here is an example.

<style>
  .bg-shorthand {
    background: #d2c54b url("/img/css/sunflowers.jpg") no-repeat right top;
    height: 200px;
    padding: 25px;
  }
</style>

<div class="bg-shorthand">
  This element uses the shorthand CSS background property.
</div>

Code Explanation

For details on the background property, see our CSS background property reference.

The background-color property defines the element's background color.
Here is an element with a background color.

<div style="background-color: lightblue; 
            padding:20px;">
  An element with a background color
</div>

Color values can be specified with any of the following formats:

• Valid color name (e.g. white)
• HEX (e.g. #ffffff)
• RGB / RGBA - (e.g. rgb(255,0,0))
• HSL / HSLA - (e.g. rgb(0,0%,100%))

An element using the HEX color format.

<p style="background-color:#302ea3; 
          padding:20px; color: white;">
  An element with a #302ea3 background color
</p>

For details on the background-color property, see our CSS background-color property reference.

The background-image property sets an image as the element's background.
By default, the image is tiled until it covers the entire element.

An element with a background image.

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

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

For details on the background-image property, see our CSS background-image property reference.

By default, a background image is repeated, both horizontally and vertically). Using the background-repeat property, background image repeat behavior can be specified:

• To repeat the background image horizontally, use the repeat-x value.
• To repeat the background image vertically, use the repeat-y value.
• To prevent the background image from repeating, use the no-repeat value.

An element with a background image that repeats horizontally.

<style>
  .bg-repeat-x {
    background-image: url("/img/css/wheatfield-with-crows-sm.jpg");
    background-repeat: repeat-x;
    height: 200px;
    border: 1px solid #aaa;
  }
</style>

<div class="bg-repeat-x"></div>

A no-repeat value displays the background image only once.

<style>
  .bg-no-repeat {
    background-image: url("/img/css/wheatfield-with-crows-sm.jpg");
    background-repeat: no-repeat;
    height: 200px;
    border: 1px solid #aaa;
  }
</style>

<div class="bg-no-repeat"></div>

For details on the background-repeat property, see our CSS background-repeat property reference.

The background-position property sets the position of the background image.

An element with a background image positioned at the top right corner.

<style>
  .bg-pos {
    background-image: url("/img/css/wheatfield-with-crows-sm.jpg");
    background-repeat: no-repeat;
    background-position: top right;
    height: 200px;
    border: 1px solid #aaa;
  }
</style>

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

For details on the background-position property, see our CSS background-position property reference.

<style>
  .bg-pos-px {
    background-image: url("/img/css/wheatfield-with-crows-sm.jpg");
    background-repeat: no-repeat;
    background-position: right 80px top 20px;
    height: 200px;
    border: 1px solid #aaa;
  }
</style>

<div class="bg-pos-px"></div>

The background-attachment property specifies how a background image will attach to the element. Background images may scroll with the rest of the page or have a fixed position.

A background image with a fixed position in the document.
Scroll the page and the images will stay fixed.

<style>
  .bg-fixed {
    background-image: url("/img/css/cardplayers.jpg");
    height: 300px;
    width: 300px;
    background-attachment: fixed;
  }
</style>

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

A background image with a scroll attachment value.
It scrolls with the rest of the page.

<style>
  .bg-scroll {
    background-image: url("/img/css/cardplayers.jpg");
    height: 300px;
    width: 300px;
    background-attachment: scroll;
  }
</style>

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

For details on the background-attachment property, see our CSS background-attachment property reference.

A summary of all background properties -- with and without images.

• Our CSS background Property Reference
• Our CSS background-color Property Reference
• Our CSS background-image Property Reference
• Our CSS background-position Property Reference