J'essaie de mélanger background-imageet de background-sizepropriétés dans une propriété en sténographie background. Basé sur la documentation du W3C, il background-size doit venir après la background-positionpropriété séparée par une barre oblique ( /).

Exemple W3C:

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

est équivalent à:

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 dit la même chose. J'ai également trouvé ceci et cet article sur la propriété d'arrière-plan CSS3 abrégée expliquant cela.

Mais ça ne fonctionne pas! Il n'est pas non plus clair comment créer une backgroundpropriété abrégée quand background-sizeet background-positionavoir deux valeurs différentes pour background-position-xet background-position-you la même chose pour background-size. On ne sait pas comment /se déroule la barre oblique ( )? Cet exemple ne fonctionne pas dans mon Chrome 15.

Exemple que j'ai essayé de faire un raccourci est ce code 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;  
}

Un exemple plus propre

Cela fonctionne ( 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;
    }

Cela ne fonctionne pas ( jsfiddle )

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

Cela ne fonctionne pas trop ( jsfiddle )

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

1. Votre jsfiddle utilise background-imageau lieu debackground
2. Cela semble être un cas de "pas encore pris en charge par ce navigateur".

Cela fonctionne dans Opera: http://jsfiddle.net/ZNsbU/5/
Mais cela ne fonctionne pas dans FF5 ni IE8. (oui pour les navigateurs obsolètes: D)

Code:

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

Vous pouvez le faire comme ceci:

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

Qui fonctionne dans FF5 et Opera mais pas dans IE8.

Vous pouvez faire comme

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

Juste une note pour référence: j'essayais de faire de la sténographie comme ceci:

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

mais les navigateurs iPhone Safari n'affichaient pas l'image correctement avec un élément de position fixe. Je n'ai pas vérifié avec un non fixe, car je suis paresseux. J'ai dû passer le css à ce qui est ci-dessous, en prenant soin de mettre background-size après la propriété background. Si vous les faites à l'envers, l'arrière-plan rétablit la taille de l'arrière-plan à la taille d'origine de l'image. Donc, généralement, j'éviterais d'utiliser le raccourci pour définir la taille de l'arrière-plan.

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

essayez comme ça

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


/* 100px is the background size */

Vous devrez utiliser des préfixes de fournisseur pour prendre en charge différents navigateurs et ne pouvez donc pas l'utiliser en raccourci.

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