CSS Backgrounds and Borders

https://www.w3.org/TR/css-backgrounds-3/
Admin
CSS Backgrounds and Borders defines CSS properties for styling element borders and backgrounds,...
Tokens:22,015
Snippets:170
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Background shorthand examples

Source: https://www.w3.org/TR/css-backgrounds-3

Example showing a simple background-color declaration and a more complex background shorthand with multiple properties.

```css
body { background: red }
p { background: url("chess.png") 40% / 10em gray
                round fixed border-box; }
```

--------------------------------

### Equivalent longhand for multiple background layers

Source: https://www.w3.org/TR/css-backgrounds-3

Equivalent longhand properties for the multiple-layer shorthand example.

```css
background-image:      url(a.png),  url(b.png),          url(c.png);
background-position:   top left,    center,              top left;
background-repeat:     no-repeat,   no-repeat,           repeat;
background-clip:       border-box,  border-box,          border-box;
background-origin:     padding-box, padding-box,         padding-box;
background-size:       auto auto,   100% 100%,           auto auto;
background-attachment: scroll,      scroll,              scroll;
background-color:      white;
```

--------------------------------

### background-image examples

Source: https://www.w3.org/TR/css-backgrounds-3

Shows four ways to set background-image: a URL, none, multiple comma-separated images, and a radial-gradient. The none value and empty or undisplayable images count as layers but draw nothing.

```css
html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }

```

--------------------------------

### Equivalent longhand for body background

Source: https://www.w3.org/TR/css-backgrounds-3

Equivalent longhand properties for the body rule in the previous example.

```css
body {
    background-color: red;
    background-position: 0% 0%;
    background-size: auto;
    background-repeat: repeat;
    background-clip: border-box;
    background-origin: padding-box;
    background-attachment: scroll;
    background-image: none }
```

--------------------------------

### Equivalent longhand for p background

Source: https://www.w3.org/TR/css-backgrounds-3

Equivalent longhand properties for the p rule in the previous example.

```css
p {
    background-color: gray;
    background-position: 40% 50%;
    background-size: 10em auto;
    background-repeat: round;
    background-clip: border-box;
    background-origin: border-box;
    background-attachment: fixed;
    background-image: url(chess.png) }
```

--------------------------------

### Fixed background band example

Source: https://www.w3.org/TR/css-backgrounds-3

Creates an infinite vertical band that remains glued to the viewport when the document is scrolled. Uses background-attachment: fixed.

```css
body {
  background: red url("pendant.gif");
  background-repeat: repeat-y;
  background-attachment: fixed;
}
```

--------------------------------

### CSS border shorthand equivalence example

Source: https://www.w3.org/TR/css-backgrounds-3

Shows that the border shorthand is equivalent to setting the four individual border properties plus border-image to none. The first rule uses the border shorthand, and the following five rules set the same values explicitly.

```css
p { border: solid red }
p {
  border-top: solid red;
  border-right: solid red;
  border-bottom: solid red;
  border-left: solid red;
  border-image: none;
}

```

--------------------------------

### background-repeat: repeat-y example

Source: https://www.w3.org/TR/css-backgrounds-3

Tiles a background image vertically (repeat-y) while centering it horizontally. The image repeats only along the vertical axis, leaving the horizontal axis unrepeated.

```css
body {
  background: white url("pendant.png");
  background-repeat: repeat-y;
  background-position: center;
}

```

--------------------------------

### background-repeat: space example

Source: https://www.w3.org/TR/css-backgrounds-3

Uses background-repeat: space to repeat the image as many times as fit without clipping, then spaces the copies evenly. The first and last images touch the edges of the background positioning area.

```css
body {
  background-image: url(dot.png) white;
  background-repeat: space
}

```

--------------------------------

### Background shorthand equivalence with visual-box

Source: https://www.w3.org/TR/css-backgrounds-3

Shorthand and its equivalent longhand form, showing how background-origin and background-clip are set by a single visual-box value.

```css
div { background: padding-box url(paper.jpg) white center }
div {
    background-color: white;
    background-image: url(paper.jpg);
    background-repeat: repeat;
    background-attachment: scroll;
    background-position: center;
    background-clip: padding-box;
    background-origin: padding-box;
    background-size: auto auto }
```

--------------------------------

### Background color and image shorthand

Source: https://www.w3.org/TR/css-backgrounds-3

Shorthand setting a background color and an image rescaled to full width.

```css
E { background: #CCC url("metal.jpg") top left / 100% auto no-repeat}
```

--------------------------------

### Multiple background layers shorthand

Source: https://www.w3.org/TR/css-backgrounds-3

Shorthand with multiple comma-separated background layers.

```css
background: url(a.png) top left no-repeat,
            url(b.png) center / 100% 100% no-repeat,
            url(c.png) white;
```

--------------------------------

### CSS border property order example

Source: https://www.w3.org/TR/css-backgrounds-3

Illustrates the importance of rule order when using border properties with overlapping functionality. The border-left shorthand resets the left border's color to its initial value, overriding the earlier border-color: red for that side.

```css
blockquote {
  border-color: red;
  border-left: double;
  color: black
}

```

--------------------------------

### Show background image at natural size

Source: https://www.w3.org/TR/css-backgrounds-3

Shows the background image at its natural size using the default values for background-repeat and background-size.

```css
div {
  background-image: url(image1.png);
  background-repeat: repeat;         /* default */
  background-size: auto }            /* default */

```

--------------------------------

### Layering multiple background images with list matching

Source: https://www.w3.org/TR/css-backgrounds-3

Two equivalent sets of background declarations. The first has extra values for background-position and missing values for background-origin and background-repeat; the second shows the result after the UA drops the extra position and repeats the missing lists (emphasized with asterisks).

```css
background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;

```

```css
background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left;
background-origin: border-box, content-box**, border-box**;
background-repeat: no-repeat**, no-repeat, no-repeat**;

```

--------------------------------

### Fallback for fixed backgrounds

Source: https://www.w3.org/TR/css-backgrounds-3

Shows fallback declarations for user agents that do not support fixed backgrounds. The first declaration is for all UAs, the second for those that support fixed backgrounds.

```css
body {
  /* For all UAs: */
  background: white url(paper.png) scroll;
  /* For UAs that do fixed backgrounds: */
  background: white url(ledger.png) fixed;
}
h1 {
  /* For all UAs: */
  background: silver;
  /* For UAs that do fixed backgrounds: */
  background: url(stripe.png) fixed, white url(ledger.png) fixed;
}
```

--------------------------------

### background shorthand with position keywords

Source: https://www.w3.org/TR/css-backgrounds-3

Uses the background shorthand with keyword values to set background-position to the stated percentage values. The comments show the resulting horizontal and vertical percentages.

```css
body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */
```

--------------------------------

### background-position offset declarations

Source: https://www.w3.org/TR/css-backgrounds-3

Shows how to specify background-position with one or two values, where a single value defaults the other to center, and with three or four values where each offset must be preceded by a keyword indicating the edge. The comments show the resulting (horizontal, vertical) offsets from the top left corner.

```css
background-position: left 10px top 15px;   /* 10px, 15px */
background-position: left      top     ;   /*  0px,  0px */
background-position:      10px     15px;   /* 10px, 15px */
background-position: left          15px;   /*  0px, 15px */
background-position:      10px top     ;   /* 10px,  0px */
background-position: left      top 15px;   /*  0px, 15px */
background-position: left 10px top     ;   /* 10px,  0px */
```

--------------------------------

### CSS border-image with url() and round stretch

Source: https://www.w3.org/TR/css-backgrounds-3

Creates a border image from a 81x81 pixel image divided into 9 equal parts. The border-image shorthand slices the image at 27 pixels, rounds the top and bottom edges, and stretches the left and right edges.

```css
DIV {
  border: double orange 1em;
  border-image: url("border.png") 27 round stretch;
 }
```

--------------------------------

### background-image grammar: <bg-image> = <image> | none

Source: https://www.w3.org/TR/css-backgrounds-3

Grammar definition for the background-image property value, which is either an <image> or the keyword none. The property accepts a comma-separated list of these values.

```css
<bg-image> = <image> | none

```

--------------------------------

### Force background image to 15px by 15px

Source: https://www.w3.org/TR/css-backgrounds-3

Forces the background image to be 15 by 15 pixels using background-size: 15px 15px.

```css
p {
  background-size: 15px 15px;
  background-image: url(tile.png)}

```

--------------------------------

### Background shorthand grammar

Source: https://www.w3.org/TR/css-backgrounds-3

Grammar for the background shorthand value, defining the syntax for background layers and the final layer that may include a color.

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

--------------------------------

### background-position value grammar

Source: https://www.w3.org/TR/css-backgrounds-3

Defines the grammar for the background-position property values. It allows one or two keywords or length-percentage values.

```css
<bg-position> = [
  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]
|
  [ center | [ left | right ] <length-percentage>? ] &&
  [ center | [ top | bottom ] <length-percentage>? ]
]
```

--------------------------------

### background-repeat <repeat-style> grammar

Source: https://www.w3.org/TR/css-backgrounds-3

Grammar for the background-repeat property value. Single keywords compute to pairs: repeat-x to repeat no-repeat, repeat-y to no-repeat repeat, repeat to repeat repeat, space to space space, round to round round, and no-repeat to no-repeat no-repeat.

```css
<repeat-style> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

```

--------------------------------

### Fit two copies horizontally with background-size: 50% auto

Source: https://www.w3.org/TR/css-backgrounds-3

Stretches the image so that exactly two copies fit horizontally while preserving the aspect ratio. Uses background-size: 50% auto and background-origin: border-box.

```css
p {
  background-image: url(tubes.png);
  background-size: 50% auto;
  background-origin: border-box }

```

--------------------------------

### Use natural image size with background-size: auto

Source: https://www.w3.org/TR/css-backgrounds-3

Uses the image's natural size with background-size: auto, which is the only possible behavior in CSS level 1 and 2.

```css
body {
background-size: auto;            /* default */
background-image: url(flower.png) }

```

--------------------------------

### background-attachment value grammar

Source: https://www.w3.org/TR/css-backgrounds-3

Defines the grammar for the background-attachment property values. The keywords are scroll, fixed, and local.

```css
<attachment> = scroll | fixed | local
```

--------------------------------

### Round background height with background-repeat: repeat round

Source: https://www.w3.org/TR/css-backgrounds-3

Shows the background with a width of 3em and a height that is either the height corresponding to that width at the original aspect ratio or slightly less.

```css
div {
  background-image: url(image4.png);
  background-repeat: repeat round;
  background-size: 3em auto }

```
Tokens:
Raw