CSS Backgrounds

CSS can assign different background styles to HTML elements.

These include background color and background image effects.

Example

#

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 shorthand property

In CSS, shorthand properties are used to shorten the code.

It does this by accepting multiple property values in a single shorthand property.

The background property specifies 5 background properties in a single declaration.

The background property sets these properties in order:

Here is an example.

This element uses the shorthand CSS background property.
<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

A background color is applied to the element.

The image URL specifies the element's background image.

The no-repeat specifies that the background image is displayed only once.

The right top specifies the position of the background image in the element.

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

Background Color

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

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.

An element with a #302ea3 background color

<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.


Background Image

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.


Background Repeat

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.


Background Position

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.


Did you know?

Did you know?

Positioning background images

Background images are positioned in either top, bottom, left, right, or center. Alternatively, you can precisely position images with pixels or percentage values.

A background image positioned with pixel values.

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

Background Attachment

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.


All CSS Background Properties

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

Property Description
background Defines all the background properties in a single declaration
background-attachment Whether a background image is fixed or scrolls with the page
background-clip Specifies the painting area of the background
background-color Sets the background color of an element
background-image Sets the background image for an element
background-origin Specifies where the background image is positioned
background-position Sets the starting position of a background image
background-repeat Specifies how a background image will be repeated
background-size Specifies the size of the background image

You may also like

Guides