CSS Reference Guide: background

The CSS background shorthand property sets the background effects of an element. This controls what paints underneath the content of an element.

Jump ahead:

• Demo
• Component properties
  • background-image
  • background-position
  • background-size
  • background-repeat
  • background-attachment
  • background-origin
  • background-clip
  • background-color

The following example shows the complete list of the properties that can be specified to create any background effect for an element:

header {
  background: 
    url('folder/image.jpg') // image
    top center /  // position
    150px 150px   // size
    no-repeat     // repeat
    fixed         // attachment
    padding-box   // origin
    content-box   // clip
    blue;         // color
}

---

Demo

See the Pen
CSS Background Example by Solomon Eseme (@kaperskyguru)
on CodePen.

---

Component properties

The background shorthand is made up of eight component properties. Let’s dive into each of them below.

background-image

background-image is a CSS property that sets one or multiple images to the background of an element. When specifying multiple images, they are displayed as a stack, with one on top of the other.

Default value

The default value of background-image is none, which simply means that no image will be displayed.

header {
  background-image: none
}

Usage

This example specifies only a single image.

header {
  background-image: url('folder/image.jpg');
}

This example will display the first image on top of the second image.

header {
  background-image: 
    url('folder/first.jpg'), 
    url('folder/second.jpg')
}

This example specifies a linear-gradient above the second image.

header {
  background-image: 
    linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
    url('folder/second.jpg')
}

---

background-position

The background-position property sets the starting position of the background image. Its values specify the coordinates where the image will be placed relative to the edges of the element’s box.

background-position can be specified with keywords (left, top, bottom, right, center); percentages (0%, 25%, etc.); or lengths (0cm, 3px, etc.). These values can be combined together.

Default value

The default value of background-position is 0% 0%, which indicates the top-left corner of the element’s box.

header {
  background-position: 0% 0% // top left
}

Usage

header {
  background-position: top // same as top center
}

header {
  background-position: left // same as left center
}

header {
  background-position: center // center
}

header {
  background-position: 20% 50% // 20% from left and 50% from top
}

header {
  background-position: bottom 20px left 50px // 20px from bottom and 50px from left
}

header {
  background-position: left 2cm bottom 5cm; // 2cm from left and 5cm from bottom
}

---

background-size

The background-size property specifies the background image size. It defines whether the image will be stretched, displayed in its native size, or fill the entire available space.

It’s also worth noting that the spaces now covered by the image size will be filled with the background color.

background-size can be specified using keywords, percentages, or lengths.

Keywords

• cover: Scales the image as large as possible, but will never stretch the image. It can also crop the image either vertically or horizontally to cover any empty spaces
• contain: Scales the image as large as possible but will never crop or stretch the image
• auto: Scales the image in the corresponding direction such that the image maintains its original proportions

Default value

The default value of the background-size is auto.

header {
  background-size: auto;
}

Usage

header {
  background-size: auto; // default value
}

// stretches to fill the element's box
header {
  background-size: cover; 
}

// scale the image without cropping/scretching. Image can repeat to fill element's box
header {
  background-size: contain; 
}

// scale image by 20% width & auto for height. Image can repeat to fill element's box
header {
  background-size: 20%|em|cm|auto|px;
}

// scale image by 3em width and 25% height. Image can repeat to fill element's box
header {
  background-size: 3em 25%;
}

// You can specify more values for multiple backgrounds
header {
  background-size: 50%, 25%, 60%;
}

---

background-repeat

The background-repeat property specifies how the background image if and/or how it should be repeated. A background image can be specified by this property to be repeated horizontally vertically or if it should even repeat at all.

Inasmuch as an image is clipped to the size of its element by default, it can also be scaled to fit or fill the element’s box using the background-repeat property.

The background-repeat property is specified using keyword values.

Keywords

• repeat: Repeats the image to cover the entire background
• no-repeat: Will not repeat the image
• space: Repeats the image without clipping it, and evenly distributes the whitespace between the repeated images
• round: Repeats the image, and fills in the whitespace between the repeated images
• repeat-x: Repeats the image only along the x-axis
• repeat-y: Repeats the image only along the y-axis

Default value

The default value for background-repeat is repeat, which repeats the image until it fills the entire element background.

header {
  background-repeat: repeat;
}

Usage

header {
  background-repeat: repeat-x;  // equivalent `repeat no-repeat`
}

header {
  background-repeat: repeat-y; // equivalent `no-repeat repeat`
}

header {
  background-repeat: repeat; // equivalent `repeat repeat`
}

header {
  background-repeat: space; // equivalent `space space`
}

header {
  background-repeat: round; // equivalent `round round`
}

header {
  background-repeat: no-repeat; // equivalent `no-repeat no-repeat`
}

---

background-attachment

The background-attachment property specifies whether the background image should be scrollable or fixed to the viewport.

The background-attachment property is specified only with keywords.

Keywords

• scroll: Fixes the background image to its element. Does not scroll the background image with the content
• fixed: Fixes the background image to the viewport. Even if the content is scrollable, the background image will never scroll
• local: Fixes the background image relative to the element’s content, thereby allowing the background image to scroll as the content scrolls

Default value

The default value for background-attachment is scroll.

header {
  background-attachment: scroll;
}

Usage

header {
  background-attachment: scroll; // Fix image to element (can scrol only if the element is scrolling not the content of the element)
}

header {
  background-attachment: fixed; // Fix image to viewport
}

header {
  background-attachment: local; // Scrolls the image with content
}

// On multiple images we can specify double values
header {
  background-image: url("star1.gif"), url("star2.gif");
  background-attachment: fixed, scroll;
}

---

background-origin

The background-origin property specifies where to paint the background image — either across the whole element using content-box value, inside the border using the border-box value or inside the padding using the padding-box value.

Note that when background-attachment is set to fixed the background-origin is ignored and also background-origin is same with background-clip except that it resizes the background rather than clipping.

The background-origin property is specified using keyword values.

Keywords

• content-box: Positions the background relative to the content box
• border-box: Positions the background relative to the border box
• padding-box: Positions the background relative to the padding box

Default value

The default value for background-origin is the padding-box keyword.

header {
  background-origin: padding-box;
}

Usage

header {
  background-origin: border-box;
}

header {
  background-origin: padding-box;
}

header {
  background-origin: content-box;
}

// We can specify double values for multiple images
header {
  background-image: url('logo.jpg'), url('main.png');
  background-origin: content-box, padding-box;
}

---

background-clip

The background-clip property determines whether an element’s background will extend its box. Note that this property will only have a real effect when there is a background image or background color specified; otherwise, it will only have a visual effect on the border.

The CSS background-clip property is specified using keyword values.

Keywords

• border-box: Extends the background beyond the element’s border
• content-box: Clips the background to the content of the element
• padding-box: Extends the background beyond the element’s padding
• text: An experimental value that clips the background to the foreground text

Default value

The default value for background-clip is the border-box keyword.

header {
  background-clip: border-box;
}

Usage

header {
  background-clip: border-box;
}

header {
  background-clip: padding-box;
}

header {
  background-clip: content-box;
}

---

background-color

The CSS background-color property is used to set the color of the element’s background. It can be combined with the background-image property as a fallback option if the image is taking time to load.

background-color values are specified either as color names, hex values, RGB/RGBA values, or HSL/HSLA values.

Default value

The default value for background-color is the transparent keyword.

header {
  background-color: transparent;
}

Usage

/* Keyword values */
header {
  background-color: red;
}

/* Hexadecimal value */
header {
  background-color: #bbff00;
}

/* RGB value */
header {
  background-color: rgb(255, 255, 128);        /* Fully opaque */
}
header {
  background-color: rgba(117, 190, 218, 0.5);  /* 50% transparent */
}

/* HSL value */
header {
  background-color: hsl(50, 33%, 25%);         /* Fully opaque */
}
header {
  background-color: hsla(50, 33%, 25%, 0.75);  /* 75% transparent */
}