Я намагаюся змішати background-imageта background-sizeвластивості у скороченому ресурсі background. На основі документації на W3Cbackground-size слід мати background-positionвластивість, розділену косою рисою ( /).

Приклад W3C:

p { background: url("chess.png") 40% / 10em gray
       round fixed border-box; } 

еквівалентно:

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;
}

1. Ваш jsfiddle використовує background-imageзамістьbackground
2. Схоже, випадок "ще не підтримується цим браузером".

Це працює в Opera: http://jsfiddle.net/ZNsbU/5/
Але це не працює ні в FF5, ні в IE8. (Так, для застарілих веб-переглядачів: D)

Код:

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

Ви можете зробити це так:

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

Що працює у FF5 та Opera, але не в IE8.

Можна зробити так, як

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }

Просто примітка для довідки: я намагався зробити стенограму так:

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

але браузери iPhone Safari не відображали зображення належним чином з фіксованим позиційним елементом. Я не перевіряв нефіксовану, бо я лінивий. Я повинен був переключити css на те, що нижче, обережно розміщуючи розмір фону після властивості фону. Якщо ви робите їх у зворотному порядку, фон повертає розмір фону до початкового розміру зображення. Так що, як правило, я б уникав використання скорочень для встановлення розміру фону.

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;

спробуйте так

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */

Вам доведеться використовувати префікси постачальника для підтримки різних веб-переглядачів, тому не можна використовувати їх у стенограмі.

body { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}