Próbuję mieszać background-imagei background-sizewłaściwości w skróconej backgroundnieruchomości. W oparciu o dokumentację W3C background-size powinno znajdować się po background-positionwłaściwości oddzielonej ukośnikiem ( /).

Przykład W3C:

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

jest równa:

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 mówi to samo. Znalazłem również ten i ten artykuł o skróconej właściwości CSS3 background wyjaśniającej to.

Ale to nie działa! Nie jest również jasne, jak utworzyć skrótową backgroundwłaściwość, kiedy background-sizei background-positionmieć dwie różne wartości dla background-position-xi background-position-ylub tę samą rzecz dla background-size. Nie jest jasne, jak /odbywa się slash ( )? Ten przykład nie działa w moim Chrome 15.

Przykład, który próbowałem zrobić skrótem, to ten kod 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;  
}

Czystszy przykład

To działa ( 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;
    }

To nie działa ( jsfiddle )

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

To też nie działa ( jsfiddle )

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

1. Twój jsfiddle używa background-imagezamiastbackground
2. Wygląda na to, że jest to „jeszcze nieobsługiwane przez tę przeglądarkę”.

Działa to w Operze: http://jsfiddle.net/ZNsbU/5/
Ale nie działa w FF5 ani IE8. (tak w przypadku przestarzałych przeglądarek: D)

Kod :

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

Możesz to zrobić tak:

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

Który działa w FF5 i Opera, ale nie w IE8.

Możesz zrobić jako

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

Tylko uwaga w celach informacyjnych: próbowałem zrobić skrót w ten sposób:

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

ale przeglądarki Safari na iPhonie nie wyświetlały poprawnie obrazu z elementem o stałej pozycji. Nie sprawdziłem z nie ustalonym, bo jestem leniwy. Musiałem przełączyć css na to, co jest poniżej, uważając, aby umieścić background-size po właściwości background. Jeśli zrobisz to w odwrotnej kolejności, tło przywróci rozmiar tła do oryginalnego rozmiaru obrazu. Więc generalnie unikałbym używania skrótu do ustawiania rozmiaru tła.

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

spróbuj w ten sposób

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


/* 100px is the background size */

Będziesz musiał używać prefiksów dostawców, aby obsługiwać różne przeglądarki, a zatem nie możesz ich używać w skrócie.

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