pelicin › web › CSS

Background

background property sets an element's background.

Basic Concepts

An element can have multiple background layers, separated by commas. Setting background-color will set the color of the bottom-most layer.

An element has a border-box, a padding-box, a the content-box. (Relevant for background-origin and background-clip.)

Illustration of CSS Box model
Illustration of CSS Box model

Base Background Properties

background

Shorthand for the following properties (separate each layer using commas):

  • background-color
  • background-image
  • background-attachment
  • background-origin
  • background-clip
  • background-position
  • background-size
  • background-repeat
div {
  background: green;
  /* Using a <background-image> and <background-repeat> */
  background: url('test.jpg') repeat-y;
  /* Using a <background-clip> and <background-color> */
  background: border-box red;
  /* A single image, centered, and scaled */
  /* Slash syntax: <background-position>/<background-size>*/
  background: no-repeat center/80% url('/img/image.png');
}

background-color

Sets the bottom-most layer background color.

div {
  background-color: red;
}

background-image

Sets background image(s).

Specify none or images (separate multiple layers using comma).

div {
  background-image: url('/res/image.jpg');
  background-image: linear-gradient(to bottom, red, blue);
}

Background Config Properties

background-attachment

Sets how the browser "attaches" and scrolls with the element. Possible values:

  • scroll — the background is fixed to the element's border (if you scroll through the element's content, it stays)
  • local — the background is to the element's content (if you scroll the through element's content, it follows)
  • fixed — never scrolls (even if you scroll through the whole window)

background-origin

Sets the background "origin" (where to start painting the background). Possible values:

  • border-box — paint the background starting from the border-box
  • padding-box — paint the background starting from the padding-box
  • content-box — paint the background starting from the content-box
| LIVE PREVIEW
The top-left position of the image starts from the padding-box!
Try changing the background-origin!

background-clip

Sets how to clip (mask) the background. Possible values:

  • border-box — the background is visible up to the border-box
  • padding-box — the background is visible up to the padding-box
  • content-box — the background is visible up to the content-box
  • text — the background is masked with the forground color of the text (you will need to set the transparancy of the text to make the background visible, e.g. via color: transparent or color: rgba(...))
| LIVE PREVIEW
You can see the background under the dashed border!

background-position

Sets the position of the background image, relative to background-origin.

You can specify 1 to 4 values. You can use (1) a keyword (top, bottom, left, right, center), and/or an offset (e.g. 20% or 12px), max. 2 each (one for the x-axis, one for the y-axis).

div {
  background-position: top;
  background-position: top left;
  background-position: 50% 50%;
  background-position: top 20px left 20px;
}

background-size

Sets the displayed size of the background.

  • cover — scales the image as large as possible to fill the container, stretching or cropping the image if necessary
  • contain — scales the image as large as possible within its container without cropping or stretching the image
  • <width> <height> — e.g. auto auto, auto 20px, or 50% 50% (auto means use the image's intrinsic width/height)
| LIVE PREVIEW

background-repeat

Sets how a background should be repeated.

You can use the one-value syntax:

  • repeat — repeat on both axes
  • repeat-x — repeat on the x-axis only
  • repeat-y — repeat on the y-axis only
  • no-repeat — don't repeat
  • space — repeat as much as possible, then space the background images evenly
  • round — repeat as much as possible, then stretch/squish the background image to fill the remaining space

... or the two-value syntax, specifying either of the following for both the x and y axes (e.g. repeat no-repeat): repeat, no-repeat, round, space.

Assets

References