Bagaimana cara meregangkan gambar latar belakang agar sesuai dengan layar dalam html?

Question

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

Table of Contents Show

Cara CSS yang mengagumkan, mudah, dan progresif
Teknik khusus CSS #1
Teknik khusus CSS #2
metode jQuery
Bagaimana cara menskalakan gambar latar belakang ke ukuran layar dalam HTML?
Bagaimana cara meregangkan gambar agar sesuai dengan layar saya?
Bagaimana Anda membuat gambar latar belakang sesuai dengan layar responsif?

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')";

0

Ini 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')";

_1

Jika 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')";

_2

Perhatikan 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

Bagaimana cara menskalakan gambar latar belakang ke ukuran layar dalam HTML?

Dengan menggunakan CSS, Anda dapat mengatur properti background-size agar gambar pas dengan layar (viewport) . Properti background-size memiliki nilai cover. Ini menginstruksikan browser untuk secara otomatis menskalakan lebar dan tinggi gambar latar responsif agar sama atau lebih besar dari viewport.

Bagaimana cara meregangkan gambar agar sesuai dengan layar saya?

Anda dapat menggunakan ukuran latar belakang CSS. cover; untuk meregangkan dan menskalakan gambar di latar belakang hanya dengan CSS. Ini menskalakan gambar sebesar mungkin sedemikian rupa sehingga area latar belakang sepenuhnya tertutupi oleh gambar latar belakang, sembari mempertahankan rasio aspek intrinsiknya.

Bagaimana Anda membuat gambar latar belakang sesuai dengan layar responsif?

Berikut cara membuat gambar latar responsif dengan CSS. Gunakan properti background-size untuk menyertakan viewport . Berikan properti ini nilai sampul yang akan memberi tahu browser untuk menskalakan tinggi dan lebar gambar latar sehingga selalu sama atau lebih besar dari tinggi/lebar area pandang perangkat.

kode html