Ben karıştırmak için çalışıyorum background-imageve background-sizebir elemanımız içinde özellikler backgroundmülkiyet. Göre W3C belgeleri background-size sonra gelmelidir background-positionözelliği, bir çizgi ile ayrılmış ( /).

W3C örneği:

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

eşdeğerdir:

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 aynı şeyi söylüyor. Bunuaçıklayan CSS3 arka plan özelliği hakkında bunu ve bu makaleyide buldum.

Ama bu çalışmıyor! Ayrıca, bir steno backgroundözelliğin ne zaman background-sizeve background-positioniki farklı değer için background-position-xve background-position-yveya aynı şey için nasıl yapılacağı da açık değildir background-size. Eğik çizginin ( /) nasıl gerçekleştiği açık değil mi? Bu örnek Chrome 15'imde çalışmıyor.

Örnek bir kısaltma yapmaya çalıştım şu CSS kodu:

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

Daha temiz bir örnek

Bu çalışıyor ( 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;
    }

Bu çalışmıyor ( jsfiddle )

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

Bu da çalışmıyor ( jsfiddle )

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

1. Jsfiddle'ın background-imageyerine şunu kullanır :background
2. Görünüşe göre "bu tarayıcı tarafından henüz desteklenmiyor" durumu.

Bu Opera'da çalışır: http://jsfiddle.net/ZNsbU/5/
Ancak FF5 veya IE8'de çalışmaz. (eski tarayıcılar için yay: D)

Kod:

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

Bunu şu şekilde yapabilirsin:

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

FF5 ve Opera'da çalışan ancak IE8'de çalışmayan.

Olarak yapabilirsin

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

Referans için sadece bir not: Ben de böyle bir kısaltma yapmaya çalışıyordum:

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

ancak iPhone Safari tarayıcıları, resmi sabit konumlu bir öğeyle düzgün şekilde göstermiyordu. Sabit olmayan biriyle kontrol etmedim çünkü tembelim. Arka plan özelliğinden sonra arka plan boyutu koymaya özen göstererek css'yi aşağıdakine geçirmek zorunda kaldım . Bunları tersten yaparsanız, arka plan arka plan boyutunu görüntünün orijinal boyutuna döndürür. Bu yüzden genellikle arka plan boyutunu ayarlamak için steno kullanmaktan kaçınırım.

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

böyle dene

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


/* 100px is the background size */

Farklı tarayıcıları desteklemek için satıcı öneklerini kullanmanız gerekecek ve bu nedenle kısayol olarak kullanamazsınız.

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