Regangkan dan skala latar belakang CSS


653

Apakah ada cara untuk mendapatkan latar belakang dalam CSS untuk meregangkan atau skala untuk mengisi wadahnya?

Jawaban:


267

Untuk peramban modern, Anda dapat melakukannya dengan menggunakan background-size:

body {
    background-image: url(bg.jpg);
    background-size: cover;
}

cover berarti meregangkan gambar baik secara vertikal maupun horizontal sehingga tidak pernah ubin / berulang.

Itu akan bekerja untuk Safari 3 (atau lebih baru), Chrome, Opera 10+, Firefox 3.6+, dan Internet Explorer 9 (atau lebih baru).

Agar dapat bekerja dengan versi yang lebih rendah dari Internet Explorer, coba CSS ini:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";

2
Untuk Clement: Apa yang Anda sarankan untuk filter untuk IE: sebelumnya hanya berfungsi sebagian. Ini skala lebar gambar ok tapi skala tinggi salah dengan tidak membatasi apa pun. Semakin tinggi halaman, begitu juga gambar latar belakang .. = (Saya sudah mencoba ini pada IE8. Dan, mungkinkah menggunakan perintah 'cover' ini dan membuat ini kompatibel dengan ponsel seperti iphone? Saya tahu ada viewport masalah tapi mungkinkah untuk memperbesar viewport ke seluruh layar dengan cara latar belakang diskalakan di sini ?? Terima kasih atas tanggapannya!

3
Filter khusus IE bukan solusi ideal sehingga merasa bebas untuk kondisi untuk IE dengan alternatif CSS. Saya pribadi menggunakan "sampul" CSS3 di situs saya sendiri dan berfungsi baik di perangkat iOS, pastikan untuk menentukan lebar perangkat.
Clement

9
Sampul tidak meregangkan bg. 100% 100% ya.
neoswf

Solusi ini bekerja paling baik untuk saya di mana saya tidak ingin meregangkan gambar baik secara horizontal atau vertikal lebih dari resolusi sebenarnya. Terima kasih..!!
Tn. Noddy

1
NB: Pada Chromium 78.0.3904.97, tidak mungkin untuk skala gambar svg secara independen di sepanjang setiap sumbu. Anda mungkin harus memperbesar dan mengubahnya menjadi gambar raster.
Mike

567

Gunakan properti CSS 3background-size :

#my_container {
    background-size: 100% auto; /* width and height, can be %, px or whatever. */
}

Ini tersedia untuk peramban modern, sejak 2012.


93
Untuk mempertahankan rasio aspek gambar Anda harus menggunakan "background-size: cover;" atau "ukuran latar belakang: berisi;". Saya telah membangun polyfill yang mengimplementasikan nilai-nilai itu di IE8: github.com/louisremi/background-size-polyfill
Louis-Rémi

6
Saya tahu ini berumur satu tahun tetapi saya harus (tertawa dan) setuju dengan bagian 'browser yang layak'. Periksa semua peramban Anda tetapi saya memiliki lebih banyak masalah dengan IE daripada yang lainnya.
ErocM

36
Saya harus mengatur background-size: 100% 100%;untuk mendapatkan efek yang saya inginkan, jika itu membantu orang lain.
guanome

1
penjelasan coverdan contain tentang MDN
mohas

2
ini sebenarnya tidak berhasil. Pertanyaannya adalah mengisi wadah yang artinya kita ingin meregangkannya agar tidak terulang. Di sisi lain, jawaban ini akan mengulangi arah ketinggian jika ketinggiannya tidak menutupi area. "Regangkan untuk mengisi" berarti peregangan namun Anda harus melakukannya agar tidak berulang. Jawaban yang benar adalah "sampul" dari bawah. Itu sebenarnya menangani kasus ini tidak.
gman

171

Penskalaan gambar dengan CSS tidak mungkin dilakukan, tetapi efek serupa dapat dicapai dengan cara berikut.

Gunakan markup ini:

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

dengan CSS berikut:

#background {
    width: 100%; 
    height: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:100%;
}

dan kamu harus selesai!

Untuk mengatur skala gambar menjadi "full bleed" dan mempertahankan aspek rasio, Anda bisa melakukan ini sebagai gantinya:

.stretch { min-width:100%; min-height:100%; width:auto; height:auto; }

Berhasil dengan baik! Namun, jika satu dimensi dipangkas, itu akan dipangkas hanya pada satu sisi gambar, dan bukannya dipangkas secara merata di kedua sisi (dan di tengah). Saya sudah mengujinya di Firefox, Webkit , dan Internet Explorer 8.


2
Ini berfungsi dengan baik ... tetapi sedang mencari sesuatu yang sedikit lebih kuat (mungkin dengan javascript) yang juga memusatkan dan disesuaikan berdasarkan apakah gambar itu lanskap atau potret. Jika ada yang punya solusi dalam nada itu akan menyukai tautan ... terima kasih!
Brian Armstrong

4
Jika ada orang lain yang tertarik, ini sepertinya bekerja dengan baik: buildinternet.com/project/supersized
Brian Armstrong

1
Pemusatan horizontal dapat dilakukan dengan margin: 0 autoaktif .stretch. Dengan hanya mengatur widthatau height, rasio aspek tetap sama. Coba gunakan max-widthdan max-heightuntuk membatasi faktor zoom ...
Ronald

1
Ini tidak bekerja untuk saya di ie8 / ie9, tetapi bekerja di ie6 / ie7 (dan tentu saja semua browser lain). Dalam ie8 / ie9, gambar hanya muncul sekitar 3/4 dari div. Adakah yang memiliki masalah yang sama?

3
Kelemahan dengan SO: tidak ada cara untuk menandai jawaban yang tidak lagi benar, menyebabkan orang-orang seperti @Ullas disesatkan. Sangat mudah untuk mengukur latar belakang di semua browser modern. developer.mozilla.org/en/CSS/background-size
Glenn Maynard

161

Gunakan atribut ukuran latar belakang di CSS3:

.class {
     background-image: url(bg.gif);
     background-size: 100%;
}

EDIT: Modernizr mendukung deteksi dukungan ukuran latar belakang . Anda dapat menggunakan solusi JavaScript yang ditulis untuk bekerja namun Anda membutuhkannya dan memuatnya secara dinamis ketika tidak ada dukungan. Ini akan menjaga kode dapat dipertahankan tanpa menggunakan hack CSS intrusif untuk browser tertentu.

Secara pribadi saya menggunakan skrip untuk menghadapinya menggunakan jQuery, ini merupakan adaptasi dari imgsizer . Seperti kebanyakan desain yang saya lakukan sekarang menggunakan lebar% 's untuk tata letak cairan di perangkat ada sedikit adaptasi ke salah satu loop (terhitung untuk ukuran yang tidak selalu 100%):

for (var i = 0; i < images.length; i++) {
    var image = images[i],
        width = String(image.currentStyle.width);

    if (width.indexOf('%') == -1) {
        continue;
    }

    image.origWidth = image.offsetWidth;
    image.origHeight = image.offsetHeight;

    imgCache.push(image);
    c.ieAlpha(image);
    image.style.width = width;
}

EDIT: Anda mungkin juga tertarik dengan Finalisasi jQuery CSS3 [s] e .


3
Hanya untuk menekankan, Modernizr TIDAK mengaktifkan dukungan untuk ukuran latar belakang di browser yang tidak mendukungnya. Itu hanya memiliki tes lintas-browser yang nyaman untuk itu. Terserah Anda untuk memalsukannya ketika tes kembali palsu.
Chris Moschini

34

Coba ukuran latar belakang artikel . Jika Anda menggunakan semua yang berikut, ini akan berfungsi di sebagian besar browser kecuali Internet Explorer.

.foo {
    background-image: url(bg-image.png);
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%; 
    background-size: 100% 100%;
} 

1
Terima kasih! Ini berbeda dari "background-size: cover"
Pavel Vlasov

1
ini membentang bagi saya di iPad, tetapi tidak skala. Terima kasih untuk posting.
Don Cote

1
Ini bagus untuk membuatnya menyusut latar belakang juga. Terima kasih!
beingalex

1
Jika gambar latar belakang adalah SVG, itu juga perlu untuk menentukan preserveAspectRatio="none"dalam SVG. Info lebih lanjut tentang ini di sini . Demo di sini .
Mentalist

Anda dapat menggunakan ukuran latar: cover; background-attachment: fix; Anda dapat skala itu
Siraj Ahmed

15

Tidak saat ini. Ini akan tersedia di CSS 3 , tetapi akan memakan waktu sampai diimplementasikan di sebagian besar browser.


2
Artikel bagus tersedia di A List Apart: Silakan Supersize Background itu!
jensgram

3
-1 Saya tidak berpikir jawaban ini sangat relevan ... dan tidak menawarkan solusi apa pun .
Potherca

1
@Potherca jawaban ini benar pada saat itu (hampir 3 tahun yang lalu).
Eran Galperin

4
Ada alasan tanggal ditampilkan. Itu harus disimpan untuk referensi sejarah. Apakah Anda memeriksa semua jawaban lama di situs dan membatalkannya? jawabannya masih benar bahkan jika lebih banyak informasi telah ditambahkan sejak saat itu. Perhatikan juga bahwa jawaban lain di sini pada dasarnya menyatakan sama (dan beberapa memang salah - mereka menyatakan itu tidak mungkin). Saya merasa Anda memilih yang satu ini karena memiliki beberapa suara.
Eran Galperin

3
Tidak, saya memilih yang ini karena yang dilakukannya hanyalah mengatakan "Komputer mengatakan tidak" walaupun ada beberapa solusi untuk masalah ini bahkan pada tahun 2008 ;-)
Potherca

15
.style1 {
        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 +
  • IE 9+
  • Opera 10+ (Opera 9.5 mendukung ukuran latar belakang tetapi bukan kata kunci)
  • Firefox 3.6+ (Firefox 4 mendukung versi awalan non-vendor)

Selain itu Anda dapat mencoba ini untuk solusi yaitu

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
    zoom:1;

Kredit untuk artikel ini oleh Chris Coyier http://css-tricks.com/perfect-full-page-background-image/


Bagaimana ini lebih baik atau berbeda dari sekadar "ukuran latar belakang: penutup"?
PKHunter

@PKHunter, saya tidak yakin persis apa yang Anda rujuk. Ini menggunakan background-size: coverkecuali dengan awalan peramban dan solusi IE
Blowsie

8

Dalam satu kata: tidak. Satu-satunya cara untuk merentangkan gambar adalah dengan <img>tag. Anda harus kreatif.

Ini dulu benar pada 2008, ketika jawabannya ditulis. Hari ini dukungan browser modern background-sizeyang memecahkan masalah ini. Berhati-hatilah karena IE8 tidak mendukungnya.


6
@Lowlow - Lucu. Periksa tanggal jawaban. Lansekap peramban telah sedikit berubah dalam 5 tahun terakhir.
Vilx-

5

Tentukan "regangkan dan skala" ...

Jika Anda memiliki format bitmap, umumnya tidak bagus (secara grafis) untuk merentangkan dan menariknya. Anda dapat menggunakan pola berulang untuk memberikan ilusi efek yang sama. Misalnya, jika Anda memiliki gradien yang semakin terang ke bagian bawah halaman, maka Anda akan menggunakan grafik yang memiliki lebar piksel tunggal dan tinggi yang sama dengan wadah Anda (atau lebih disukai lebih besar untuk memperhitungkan penskalaan) dan kemudian menempelkannya di sepanjang halaman. Demikian juga, jika gradien berlari melintasi halaman, itu akan menjadi satu piksel lebih tinggi dan lebih lebar dari wadah Anda dan mengulangi halaman.

Biasanya untuk memberikan ilusi peregangan untuk mengisi wadah ketika wadah tumbuh atau menyusut, Anda membuat gambar lebih besar dari wadah. Tumpang tindih apa pun tidak akan ditampilkan di luar batas wadah.

Jika Anda menginginkan efek yang bergantung pada sesuatu seperti kotak dengan tepi melengkung, maka Anda akan menempelkan sisi kiri kotak Anda ke sisi kiri wadah Anda dengan cukup tumpang tindih yang (dalam alasan) tidak peduli seberapa besar wadah, tidak pernah kehabisan latar belakang dan kemudian Anda lapisan gambar dari sisi kanan kotak dengan tepi melengkung dan posisikan di sebelah kanan wadah. Jadi ketika wadah menyusut atau tumbuh, efek kotak melengkung tampak menyusut atau tumbuh dengannya - itu sebenarnya tidak, tetapi memberikan ilusi bahwa itulah yang terjadi.

Sedangkan untuk benar-benar membuat gambar menyusut dan tumbuh dengan wadah, Anda perlu menggunakan beberapa trik layering untuk membuat gambar tampak berfungsi sebagai latar belakang dan beberapa javascript untuk mengubah ukurannya dengan wadah. Tidak ada cara saat ini untuk melakukan ini dengan CSS ...

Jika Anda menggunakan grafik vektor, Anda jauh di luar bidang keahlian saya, saya khawatir.


Regang = Ubah dimensi x dan y secara independen mengubah rasio aspek gambar, Skala = ubah dimensi x dan y secara proporsional menjaga rasio aspek gambar.
Lawrence Dol

@SoftwareMonkey: Sebagai latar belakang maka tidak, Anda tidak dapat mengubah rentang dan skala dalam arti sebenarnya dari istilah dalam CSS lurus. Anda harus menggunakan berbagai trik CSS untuk memberikan ilusi bahwa inilah yang terjadi seperti yang telah saya jelaskan.
BenAlabaster

4

Ini yang saya buat dari itu. Di kelas peregangan, saya hanya mengubah ketinggian menjadi auto. Dengan cara ini gambar latar belakang Anda selalu memiliki ukuran yang sama dengan lebar layar dan tingginya akan selalu memiliki ukuran yang tepat.

#background {
    width: 100%;
    height: 100%;
    position: absolute;
    margin-left: 0px;
    margin-top: 0px;
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

2

Tambahkan background-attachmentbaris:

#background {
    background-attachment:fixed;
    width: 100%; 
    height: 100%; 
    position: absolute; 
    margin-left: 0px; 
    margin-top: 0px; 
    z-index: 0;
}

.stretch {
    width:100%;
    height:auto;
}

2

Saya ingin menunjukkan bahwa ini setara dengan melakukan:

html { width: 100%; height: 100%; }
body { width: 100%; height: 100%; /* Add background image or gradient to stretch here. */}

2

Solusi hebat lainnya untuk ini adalah Backstretch Srobbin yang dapat diterapkan pada tubuh atau elemen apa pun pada halaman - http://srobbin.com/jquery-plugins/backstretch/


Nick, kami biasanya meminta Anda memberikan bagian-bagian yang menonjol dalam jawaban Anda, dan menyediakan tautan eksternal hanya untuk perincian lebih lanjut - ini membantu jawaban tetap berguna jika busuk tautan.
Lawrence Dol

1
Salahku. Secara umum, Anda menambahkan backstretch ke <head> dokumen Anda lalu menginisialisasi seperti: $ (". Your-element"). Backstretch ("path / to / image.jpg");
nickff

2

Coba ini

http://jsfiddle.net/5LZ55/4/

body
{ 
    background: url(http://p1.pichost.me/i/40/1639647.jpg) no-repeat fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

1

Kiat tambahan untuk cheat SolidSmile adalah untuk mengukur (mengubah ukuran secara proporsional) dengan mengatur lebar dan menggunakan otomatis untuk ketinggian.

Ex:

#background {
    width: 500px;
    height: auto;
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: 0;
}

0

Gunakan border-image : yourimageproperti untuk mengatur gambar Anda dan skala itu ke seluruh perbatasan layar atau jendela Anda.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.