CSS Background Tests

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

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