Posting ini awalnya diterbitkan pada 21 Agustus 2009 dan sekarang diperbarui karena telah direvisi seluruhnya. Kedua metode asli dihapus dan sekarang diganti dengan empat metode baru
Tujuannya di sini adalah gambar latar belakang di situs web yang menutupi seluruh jendela browser setiap saat. Mari kita taruh beberapa spesifik di atasnya
- Isi seluruh halaman dengan gambar, tanpa spasi putih
- Menskalakan gambar sesuai kebutuhan
- Mempertahankan proporsi gambar (rasio aspek)
- Gambar dipusatkan di halaman
- Tidak menyebabkan scrollbar
- Kompatibel lintas-browser mungkin
- Bukankah beberapa kejahatan mewah seperti Flash
Cara CSS yang mengagumkan, mudah, dan progresif
Kami dapat melakukan ini murni melalui CSS berkat properti filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";3 sekarang di CSS. Kami akan menggunakan elemen filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";_4 (lebih baik dari filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";5 karena elemen ini selalu setinggi jendela browser). Kami menetapkan latar belakang tetap dan terpusat di atasnya, lalu sesuaikan ukurannya menggunakan filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";3 setel ke kata kunci sampul
html { 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; }_Bekerja di
- Safari 3+
- Chrome Apapun+
- yaitu 9+
- Opera 10+ (Opera 9. 5 mendukung ukuran latar belakang tetapi bukan kata kunci)
- Firefox 3. 6+ (Firefox 4 mendukung versi awalan non-vendor)
Lihat demo
Memperbarui. Terima kasih kepada Goltzman di komentar untuk menunjukkan artikel Koneksi Pengembang Adobe yang menampilkan beberapa kode untuk membuat IE menutupi latar belakang juga
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";Tapi hati-hati, pembaca Pierre Orsander mengatakan mereka mencoba ini dan memiliki beberapa masalah dengan tautan pada halaman yang mati
Memperbarui. Matt Litherland menulis untuk mengatakan bahwa siapa pun yang mencoba menggunakan filter IE di atas dan mengalami masalah dengan bilah gulir atau tautan mati atau apa pun (seperti Pierre di atas) harus mencoba untuk tidak menggunakannya pada elemen filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";4 atau filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";5. Melainkan div posisi tetap dengan lebar dan tinggi 100%.
Teknik khusus CSS #1
Terima kasih banyak, seperti biasa, kepada Doug Neiner untuk versi alternatif ini. Di sini, kami menggunakan elemen sebaris, yang dapat diubah ukurannya di browser apa pun. Kami menetapkan filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";_9 yang membuatnya mengisi jendela browser secara vertikal, dan menetapkan 100% img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }0 yang membuatnya terisi secara horizontal. Kami juga menetapkan img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }_1 lebar gambar sehingga gambar tidak pernah menjadi lebih kecil dari yang sebenarnya
Bagian yang sangat pintar adalah menggunakan kueri media untuk memeriksa apakah jendela browser lebih kecil dari gambar, dan menggunakan kombo persentase kiri dan negatif kiri img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }2 agar tetap terpusat terlepas dari
Ini CSSnya
img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }_Bekerja di
- Setiap versi browser yang bagus. Safari/Chrome/Opera/Firefox
- YAITU 6. Borked – tetapi mungkin dapat diperbaiki jika Anda menggunakan semacam shim pemosisian tetap
- Yaitu 7/8. Sebagian besar berfungsi, tidak berpusat pada ukuran kecil tetapi memenuhi layar dengan baik
- YAITU 9. Bekerja
Lihat Demo
Teknik khusus CSS #2
Salah satu cara yang agak sederhana untuk menangani ini adalah dengan meletakkan gambar sebaris pada halaman, memposisikannya ke kiri atas, dan memberinya img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }1 dan filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";9 sebesar 100%, menjaga rasio aspeknya
<img class="bg" src="images/bg.jpg" alt="">.bg { position: fixed; top: 0; left: 0; /* Preserve aspet ratio */ min-width: 100%; min-height: 100%; }Namun, ini tidak memusatkan gambar dan itu keinginan yang cukup umum di sini… Jadi, kita dapat memperbaikinya dengan membungkus gambar dalam div. Div itu akan kita buat dua kali lebih besar dari jendela browser. Kemudian gambar akan ditempatkan, tetap mempertahankan rasio aspeknya dan menutupi jendela browser yang terlihat, dan bagian tengahnya yang mati
<div class="bg"> <img src="images/bg.jpg" alt=""> </div>.bg { position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; } .bg img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; min-width: 50%; min-height: 50%; }Penghargaan untuk Corey Worrell untuk konsep yang satu ini
Bekerja di
- Safari / Chrome / Firefox (tidak menguji jauh ke belakang, tetapi versi terbaru baik-baik saja)
- yaitu 8+
- Opera (versi apa pun) dan IE keduanya gagal dengan cara yang sama (salah diposisikan, tidak yakin mengapa)
- Peter VanWylen menulis untuk mengatakan bahwa jika Anda menambahkan gambar melalui JavaScript, img harus memiliki lebar. mobil; . mobil;
Lihat Demo
Pembaruan Januari 2018. Mencoba membuatnya berfungsi di Android? . 100%; . tersembunyi; . Cuplikan lengkapnya adalah
html { background: url(images/bg.jpg) no-repeat center center fixed; background-size: cover; height: 100%; overflow: hidden; }Saya mengujinya, dan tampaknya sepenuhnya benar. Tanpa itu / Dengan itu
metode jQuery
Seluruh ide ini menjadi jauh lebih mudah (dari perspektif CSS) jika kita tahu jika rasio aspek gambar (sebaris img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }5 yang ingin kita gunakan sebagai latar belakang) lebih besar atau lebih kecil daripada rasio aspek jendela browser saat ini. Jika lebih rendah, maka kita hanya dapat menyetel img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }0 hingga 100% pada gambar dan mengetahui bahwa itu akan memenuhi tinggi dan lebar. Jika lebih tinggi, kita hanya dapat mengatur img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }7 menjadi 100% dan mengetahui bahwa itu akan memenuhi tinggi dan lebar
Kami memiliki akses ke informasi ini melalui JavaScript. Seperti biasa di sekitar sini, saya suka bersandar pada jQuery
<img id="bg" src="images/bg.jpg" alt="">#bg { position: fixed; top: 0; left: 0; } .bgwidth { width: 100%; } .bgheight { height: 100%; }filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";0Ini tidak memperhitungkan pemusatan, tetapi Anda pasti dapat mengubah ini untuk melakukan itu. Penghargaan untuk Koen Haarbosch untuk konsep di balik ide ini
Bekerja di
- IE7+ (mungkin bisa masuk IE6 dengan shim posisi tetap)
- Hampir semua browser desktop lainnya
Lihat Demo
Pembaruan (Juni 2012). Pembaca Craig Manley menulis dengan cara memuat gambar latar berukuran tepat menurut layar. Misalnya, jangan memuat gambar latar belakang lebar 1900px untuk iPhone
Pertama, Anda akan membuat gambar seperti img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }_8, img.bg { /* Set rules to fill background */ min-height: 100%; min-width: 1024px; /* Set up proportionate scaling */ width: 100%; height: auto; /* Set up positioning */ position: fixed; top: 0; left: 0; } @media screen and (max-width: 1024px) { /* Specific to this particular image */ img.bg { left: 50%; margin-left: -512px; /* 50% */ } }9, <img class="bg" src="images/bg.jpg" alt="">0, dll. Kemudian, alih-alih memuat gambar, Anda memuat shim
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";_1Jika Anda tidak menyukai gif shim (secara pribadi menurut saya tidak apa-apa karena ini bukan "konten", melainkan latar belakang), Anda dapat memuat salah satu gambar asli sebagai gantinya. Kode ini akan menjelaskan hal itu
Kemudian Anda menguji lebar layar dan mengatur <img class="bg" src="images/bg.jpg" alt="">1 gambar berdasarkan itu. Kode di bawah ini melakukan pengubahan ukuran, yang mungkin Anda inginkan atau tidak. Anda bisa menjalankan kode sekali jika Anda mau
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";_2Perhatikan bahwa lebar layar bukan satu-satunya informasi bagus yang mungkin dimiliki saat memilih ukuran gambar. Lihat artikel ini
Menikmati
Jika Anda menggunakan ini, silakan tinggalkan teknik apa yang Anda gunakan dan jika Anda mengubahnya dengan cara apa pun di komentar di bawah. Selalu asik melihat teknik “in the wild. ”
Unduh file
Demi kepentingan anak cucu, ada contoh lain di sini yang disebut <img class="bg" src="images/bg.jpg" alt="">2 yang menggunakan teknik lama yang pernah menjadi bagian dari artikel ini. Itu memiliki beberapa kepintaran, tetapi tidak sebagus teknik CSS yang sekarang disajikan di atas