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');