Regangkan dan skala latar belakang CSS

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

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

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.

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.

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 .

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

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

.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/

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.

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.

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

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

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. */}

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/

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

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

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