Я пытаюсь смешать свойства background-image и background-size в сокращенном свойстве background . На основе документации W3C размер фона должен стоять после свойства background-position , разделенного косой чертой ( / ).

Пример W3C:

 p {background: url ("chess.png") 40% / 10em серый 
круглая фиксированная рамка; } 
 

эквивалентно:

 p {
background-color: gray; 
background-position: 40% 50%; 
background- size: 10em 10em; 
background-repeat: round round; 
background-clip: border-box; 
background-origin: border-box; 
background- attachment: fixed; 
background-image: url (chess.png)} 
 

MDN говорит то же самое. Я также нашел эту и эту статью о сокращенном свойстве фона CSS3, объясняющем это.

Но это не работает! Также неясно, как сделать сокращенное свойство background , когда background-size и background-position имеют два разных значения для background-position- x и background-position-y или то же самое для background-size . Непонятно как происходит косая черта ( / )? Этот пример не работает в моем Chrome 15.

Пример, который я пытался сделать сокращенным, - это следующий код CSS:

div {  
    background: url(http://www.placedog.com/125/125) 
        0 0 /  150px 100px 
        repeat no-repeat 
        fixed border-box padding-box blue;      
    height: 300px;
    width:360px;    
    border: 10px dashed magenta;  
}

Более чистый пример

Это работает ( JSFiddle )

 body{
        background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
        background-position:200px 100px;
        background-size:600px 400px;
        background-repeat:no-repeat;
    }

Это не работает ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}

Это тоже не работает ( jsfiddle )

body{
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}