Background position (relative to four edges) and Background size - Proposal

CSS3 Backgrounds and Borders Module

Please check in Safari 3. Background size also works in Opera 9.5 but is very buggy.

5a. This example is correct and demostrates how background-position with percentage values work.


background-size:100% 100%;
or
background-position:0 0;
background-size:100% 100%;
or
background-position:25% 25%;
background-size:100% 100%;
or
background-position:50% 50%; /* center */
background-size:100% 100%;
or
background-position:100% 100%;
background-size:100% 100%;
or
background-position:0 0 0 0;
background-size:100% 100%;
or
background-position:0 0 0 0;

1a.


background-size:200px 200px;
or
background-size:100% 100%;
or
background-position:0 0 0 0; /* top right bottom left */

2a.


background-position:50px 50px;
background-size:200px 200px;
or
background-position:50px 50px;
background-size:100% 100%;

2b.


background-position:50px 50px;
background-size:200px 200px;
background-repeat:no-repeat;
or
background-position:50px 50px;
background-size:100% 100%;
background-repeat:no-repeat;
or
background-position:50px -50px -50px 50px;
or
background-position:25% -25% -25% 25%;

6a.


background-position:25px 25px;
background-size:50% 50%;
or
background-position:25% 25%;
background-size:50% 50%;

6b.


background-position:25% 25%;
background-size:50% 50%;
background-repeat:no-repeat;
or
background-position:25px 75px 75px 25px;
or
background-position:12.5% 37.5% 37.5% 12.5%;

6d.


background-position:50px 50px;
background-size:100px 100px;
background-repeat:no-repeat;
or
background-position:50px 50px;
background-size:50% 50%;
background-repeat:no-repeat;
or
background-position:50% 50%; /* center */
background-size:100px 100px;
background-repeat:no-repeat;
or
background-position:50% 50%; /* center */
background-size:50% 50%;
background-repeat:no-repeat;
or
background-position:50px 50px 50px 50px;
or
background-position:25% 25% 25% 25%;

6c. test


background-position:50px -50px -50px 50px;
background-size:100px 100px;
or
background-position:25% -25% -25% 25%;
background-size:100px 100px;
or
background-position:50px -50px -50px 50px;
background-size:50% 50%;
or
background-position:25% -25% -25% 25%;
background-size:50% 50%;

7c.


background-position:50px 50px 50px 50px;
background-size:50px 50px;
or
background-position:50px 50px 50px 50px;
background-size:50% 50%;

7a.


background-position:50px 50px 50px 50px;
background-size:auto;