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;

1b.


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

2a.


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

2b.


background-position:50px 50px;
background-size:200px 200px;
background-repeat:no-repeat;

6a.


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

6a.



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 37.5% 75px 12.5%;
or
background-position:12.5% 37.5% 37.5% 12.5%;

6d.


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

6e.


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


background-position:50px 50px;
background-size:calc(100%-100px) 50px;

6f.


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


background-position:50px 50px;
background-size:calc(100%-20%) 50px;

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 -25% -25% 50px;
background-size:100px 50%;
or

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

7c.


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

7d.


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

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

7a.


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