CSS background Property

Description

The CSS background property is one of the most versatile and widely used styling tools in web design. It allows designers to define the visual backdrop of an element, influencing both aesthetics and readability. While often associated with color, the background property can manage multiple layers simultaneously, including images, gradients, and patterns. By controlling these layers, designers can create depth, contrast, and emphasis, turning a simple block of content into a visually engaging component. The property can also be used to complement other styling choices, such as typography and layout, ensuring a cohesive design language across a web page.

Beyond simple color fills, the background property interacts with other CSS properties to achieve complex visual effects. For instance, using background-image within the shorthand allows designers to place images behind content, while background-size controls how those images scale relative to the element. Similarly, background-repeat and background-position define how an image is tiled or aligned, giving complete control over its presentation. This interaction between multiple sub-properties makes background a powerful shorthand for managing layered designs efficiently.

The flexibility of the background property also extends to dynamic and responsive designs. Gradients can be applied to create smooth transitions between colors without requiring additional images, while multiple background layers can be combined to achieve sophisticated effects, such as overlays or textures. Furthermore, designers can manipulate transparency using background-color, allowing content beneath the element to remain partially visible. This capability makes the background property essential not just for aesthetics, but also for functional design, as it can enhance readability, guide user focus, and improve the overall user experience.

Definition

Initial value: See individual properties
Applies to: All elements
Inherited: No
Computed value: See individual properties
Animatable: See individual properties
JavaScript syntax: object.style.background

Interactive Demo

background: skyblue;

background: url("images/diamond.png") repeat;

background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);

background: center / contain no-repeat url("images/sunset.jpg"), #81FE9D;

Syntax

background: [ <bg-layer> , ]* <final-bg-layer>

Values

<bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box>
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

<bg-image>See background-image CSS property for values.
<position>See background-position CSS property for values.
<bg-size>See background-size CSS property for values.
<repeat-style>See background-repeat CSS property for values.
<box>See background-origin CSS property for values.
<box>See background-clip CSS property for values.
<attachment>See background-attachment CSS property for values.
<background-color>See background-color CSS property for values.
inherit

Example

HTML

<div class='container'>

  <section class='hero'>

    <h1>Beautiful Backgrounds</h1>

    <p>Example of the CSS background shorthand with multiple layers.</p>

    <a class='cta' href='#'>Learn more</a>

  </section>



  <section class='examples'>

    <div class='card'>

      <h2>Card with positioned image</h2>

      <p>This card demonstrates position and size using the background shorthand.</p>

    </div>

  </section>

</div>

CSS

/* Layout reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: #f1f5f9;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.container {
  width: 100%;
  max-width: 960px;
}

.hero {
  border-radius: 12px;
  color: #fff;
  padding: 3rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 10px 30px rgba(2,6,23,0.15);

  /*
    Background shorthand with multiple layers:
    - top layer: semi-transparent gradient
    - middle layer: photographic image, positioned center and scaled to cover
    - bottom layer: fallback color
    Also uses no-repeat for the image and a comma-separated layer order.
  */
  background:
    linear-gradient(rgba(2,6,23,0.6), rgba(2,6,23,0.3)),
    url('https://images.unsplash.com/photo-1503264116251-35a269479413?auto=format&fit=crop&w=1200&q=80') no-repeat center/cover,
    #0ea5a4;
  background-blend-mode: overlay;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.hero p {
  opacity: 0.95;
  margin-bottom: 1rem;
}

.cta {
  display: inline-block;
  background: rgba(255,255,255,0.15);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  text-decoration: none;
}

.examples .card {
  background: #ffffff url('https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=800&q=60') right 20px bottom 20px / 100px 100px no-repeat;
  border-radius: 10px;
  padding: 1.25rem;
  border: 1px solid rgba(2,6,23,0.06);
}

.examples .card h2 {
  color: #062c33;
  margin-bottom: 0.5rem;
}

.examples .card p {
  color: #264653;
  font-size: 0.95rem;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS background property. Hover over a browser icon to see the version that first introduced support for this CSS property.