# CSS Background Tests

These are in no way exhaustive, but they cover a variety of different features.

The left and right columns should look identical - left uses a single background shorthand, and right uses separate properties.

## Attachment

### Should remain motionless relative to the browser window

`background: url('background-repeat.png') fixed`
`background-image: url('background-repeat.png');
background-attachment: fixed;`

### Should scroll with box content

`background: url('background-repeat.png') local`
`background-image: url('background-repeat.png');
background-attachment: local;`

### Should remain motionless relative to the box

`background: url('background-repeat.png') scroll`
`background-image: url('background-repeat.png');
background-attachment: scroll;`

## Position

`background: url('background-repeat.png') bottom 5% right 10px no-repeat`
`background-image: url('background-repeat.png');
background-position: bottom 5% right 10px no;
background-repeat: no-repeat;`

## Clip and Origin

### Images should fill the content-box, with padding on each side. (5px, 10px, 15px, 20px) and aligned so their top-left corner will be at the top-left of the box. This produces clipping.

`background: url('background-repeat.png') yellow padding-box content-box`
`background-image: url('background-repeat.png');
background-color: yellow;
background-origin: padding-box;
background-clip: content-box;`

## Size

### Image should be stretched as large as the box, without distorting or clipping

`background: url('background-repeat.png') center / contain`
`background-image: url('background-repeat.png');
background-position: center;
background-size: contain;`

### Image should be stretched so that the whole box is covered, without distorting

`background: url('background-repeat.png') center / cover`
`background-image: url('background-repeat.png'); background-position: center; background-size: cover;`

### Images should be squashed and repeated

`background: url('background-repeat.png') top / 50% 25px`
`background-image: url('background-repeat.png'); background-position: top; background-size: 50% 25px;`

## Repeat

See here for in-depth background-repeat tests.

### Images should all be whole, and be spaced apart to fill the box

`background: url('background-repeat.png') space`
`background-image: url('background-repeat.png'); background-repeat: space;`

### Images should all be whole, and be distorted to fill the box

`background: url('background-repeat.png') round`
`background-image: url('background-repeat.png');
background-repeat: round;`

### Images should all be whole, and be shrunk and spaced to fill the box

`background: url('background-repeat.png') space round`
`background-image: url('background-repeat.png');
background-repeat: space round;`

## Multiple backgrounds

### Should have one smiley face in each corner and one in the center

`background: url('background-repeat.png') no-repeat top 5px left 5px,
url('background-repeat.png') no-repeat top 5px right 5px,
url('background-repeat.png') no-repeat bottom 5px left 5px,
url('background-repeat.png') no-repeat bottom 5px right 5px,
url('background-repeat.png') no-repeat center cyan;`
`background-color: cyan;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, center;
background-image: url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png'), url('background-repeat.png');`