Peregangan dan skala CSS background

Gunakan CSS 3 properti background-size:

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

Ini tersedia untuk browser modern, sejak tahun 2012.

Untuk browser modern, anda dapat mencapai hal ini dengan menggunakan background-size:

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

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

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

Untuk itu untuk bekerja dengan lebih rendah verions 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')";

Skala gambar dengan CSS ini tidak sangat mungkin, tetapi efek yang sama dapat dicapai dengan cara sebagai berikut, meskipun.

Menggunakan markup ini:

<div id="background">

</div>

dengan CSS berikut:

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

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

dan kau harus dilakukan!

Dalam rangka untuk skala gambar yang akan "full bleed" dan mempertahankan rasio aspek, anda dapat melakukan ini sebagai gantinya:

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

Itu berjalan dengan cukup baik! Jika salah satu dimensi dipotong, namun, itu akan dipotong hanya pada satu sisi gambar, bukannya merata dipotong pada kedua sisi (dan berpusat). I've diuji di Firefox, Webkit, dan Internet Explorer 8.

Gunakan latar belakang-atribut size dalam CSS3:

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

EDIT: Modernizr mendukung deteksi latar belakang-dukungan ukuran. Anda dapat menggunakan JavaScript solusi tertulis untuk bekerja namun anda perlu dan beban dinamis ketika tidak ada dukungan. Ini akan membuat kode dipertahankan tanpa mengganggu CSS hacks untuk browser tertentu.

Secara pribadi saya menggunakan script untuk berurusan dengan menggunakan jQuery, sebuah adaptasi dari imgsizer. Karena kebanyakan desain yang saya lakukan sekarang menggunakan lebar %'s untuk layout cairan di perangkat ada sedikit adaptasi dengan satu loop (akuntansi untuk ukuran yang tidak't 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 juga mungkin tertarik dalam jQuery CSS3 Finaliz[s]e.

Cobalah artikel background-size. Jika anda menggunakan semua dari berikut ini, itu akan bekerja 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%;
} 

.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 didukung latar belakang-ukuran tetapi tidak kata kunci)
• Firefox 3.6+ (Firefox 4 mendukung non-vendor diawali version)

Selain itu anda dapat mencoba ini untuk ie solusi

    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 dengan Chris Coyier http://css-tricks.com/perfect-full-page-background-image/

Tidak saat ini. Itu akan tersedia di CSS 3, tapi itu akan mengambil beberapa waktu sampai's dilaksanakan di sebagian besar browser.

Dalam satu kata: tidak. Satu-satunya cara untuk meregangkan sebuah gambar dengan <img> tag. Anda'll harus kreatif.

Ini digunakan untuk menjadi kenyataan pada tahun 2008, ketika jawaban itu ditulis. Saat ini browser modern mendukung background-size yang memecahkan masalah ini. Berhati-hatilah bahwa IE8 doesn't mendukungnya.

Menentukan "peregangan dan skala"...

Jika anda've punya format bitmap, it's umumnya tidak besar (secara grafis) untuk meregangkan dan menariknya tentang. Anda dapat menggunakan pola berulang untuk memberikan ilusi efek yang sama. Misalnya jika anda memiliki gradien yang mendapat ringan ke arah bawah halaman, maka anda akan menggunakan grafis yang's satu pixel lebar dan tinggi yang sama sebagai wadah (atau sebaiknya lebih besar untuk account untuk scaling) dan kemudian ubin di halaman. Demikian juga, jika gradien berlari melintasi halaman, itu akan menjadi salah satu pixel tinggi dan lebih luas dari wadah dan diulang bawah halaman.

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

Jika anda ingin efek yang bergantung pada sesuatu seperti kotak dengan tepi melengkung, maka anda akan tetap sisi kiri kotak ke sisi kiri dari wadah anda dengan cukup tumpang tindih yang (dalam alasan) tidak peduli seberapa besar wadah, itu tidak pernah habis dari latar belakang dan kemudian anda layer gambar dari sisi kanan kotak dengan tepi melengkung dan posisi di sebelah kanan dari wadah. Dengan demikian sebagai wadah menyusut atau tumbuh, melengkung efek kotak muncul untuk mengecilkan atau tumbuh dengan itu - itu doesn't bahkan, tapi hal ini memberikan ilusi bahwa adalah apa yang's terjadi.

Karena untuk benar-benar membuat gambar yang menyusut dan tumbuh dengan wadah, anda akan perlu menggunakan beberapa trik layering untuk membuat gambar yang muncul untuk berfungsi sebagai latar belakang dan beberapa javascript untuk mengubah ukuran dengan wadah. Ada's saat ini tidak ada cara untuk melakukan hal ini dengan CSS...

Jika anda're menggunakan grafis vektor, anda're cara di luar bidang keahlian saya'm takut.

Ini adalah apa yang saya've terbuat dari itu. Di kelas, saya hanya mengubah tinggi untuk auto. Dengan cara ini gambar latar belakang anda selalu punya ukuran yang sama dengan lebar layar dan ketinggian allways akan 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;
}

Lain solusi yang bagus untuk ini adalah Srobbin's Backstretch yang dapat diterapkan untuk tubuh atau setiap elemen 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;
}

Tambahkan background-attachment line:

#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 hal ini setara dengan melakukan:

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

Tip tambahan untuk SolidSmile's cheat untuk skala (proporsional re-sizing) dengan menetapkan lebar dan menggunakan auto untuk tinggi.

Ex:

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

Gunakan border-image : yourimage properti untuk mengatur gambar anda dan skala itu upto seluruh perbatasan layar atau jendela .