Saya mencoba untuk menggabungkan background-imagedan background-sizeproperti di backgroundproperti singkat . Berdasarkan dokumentasi W3C background-size harus muncul setelah background-positionproperti dipisahkan dengan garis miring ( /).

Contoh W3C:

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

setara dengan:

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 mengatakan hal yang sama. Saya juga menemukan ini danartikel ini tentang singkatan dari properti latar belakang CSS3 yang menjelaskan hal ini.

Tapi ini tidak berhasil! Juga tidak jelas bagaimana membuat backgroundproperti singkatan ketika background-sizedan background-positionmemiliki dua nilai yang berbeda untuk background-position-xdan background-position-yatau hal yang sama background-size. Tidak jelas bagaimana garis miring ( /) terjadi? Contoh ini tidak berfungsi di Chrome 15 saya.

Contoh yang saya coba buat adalah kode css ini:

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

Contoh yang lebih bersih

Ini bekerja ( 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;
    }

Ini tidak berfungsi ( jsfiddle )

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

Ini tidak berfungsi juga ( jsfiddle )

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

1. Kegunaan jsfiddle Anda background-imagebukanbackground
2. Sepertinya kasus ini "belum didukung oleh browser ini".

Ini bekerja di Opera: http://jsfiddle.net/ZNsbU/5/
Tapi tidak bekerja di FF5 atau IE8. (yay untuk browser lama: D)

Kode:

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

Anda bisa melakukannya seperti ini:

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

Yang bekerja di FF5 dan Opera tetapi tidak di IE8.

Anda bisa melakukan apa

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

Sekadar catatan untuk referensi: Saya mencoba membuat tulisan cepat seperti ini:

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

tetapi browser iPhone Safari tidak menampilkan gambar dengan benar dengan elemen posisi tetap. Saya tidak mengecek dengan non-tetap, karena saya malas. Saya harus mengganti css ke yang ada di bawah, berhati-hatilah untuk meletakkan ukuran latar belakang setelah properti latar belakang. Jika Anda melakukannya secara terbalik, latar belakang akan mengembalikan ukuran latar belakang ke ukuran asli gambar. Jadi secara umum saya akan menghindari penggunaan singkatan untuk mengatur ukuran latar belakang.

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

coba seperti ini

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


/* 100px is the background size */

Anda harus menggunakan prefiks vendor untuk mendukung browser yang berbeda dan oleh karena itu tidak dapat menggunakannya secara singkat.

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