Regangkan dan skala gambar CSS di latar belakang - hanya dengan CSS

853

Saya ingin peregangan dan skala gambar latar belakang saya tergantung pada ukuran viewport browser.

Saya telah melihat beberapa pertanyaan tentang Stack Overflow yang melakukan pekerjaan, seperti Peregangan dan skala latar belakang CSS misalnya. Ini berfungsi dengan baik, tetapi saya ingin menempatkan gambar menggunakan background, bukan dengan imgtag.

Dalam satu imgtag ditempatkan, dan kemudian dengan CSS kami menghargai imgtag.

width:100%; height:100%;

Ini berfungsi, tetapi pertanyaan itu agak lama, dan menyatakan bahwa dalam CSS 3 mengubah ukuran gambar latar belakang akan bekerja dengan cukup baik. Saya sudah mencoba contoh ini yang pertama , tetapi tidak berhasil bagi saya.

Apakah ada metode yang baik untuk melakukannya dengan background-imagedeklarasi?

css  background 
— Fábio Antunes
sumber
113
ukuran latar belakang: 100% 100%;
— Andreas L.
5
Mungkin demo ini dapat membantu: w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas Bukankah usia pertanyaan menjadi faktor? Yang ini ditanyakan 6 tahun yang lalu dan pertanyaan yang Anda tanyakan diajukan 4 tahun yang lalu.
— Fábio Antunes
@ FábioAntunes IMHO kami tidak ingin menutup pertanyaan dengan jawaban terbaik dan malah mendorong duplikat untuk menautkannya. Saya yakin ini akan dibahas di Meta tetapi saya tidak dapat menemukannya sekarang ...
— Alex Angas

Jawaban:

1047

CSS3 memiliki atribut kecil yang disebut background-size:cover.

Ini skala gambar sehingga area latar belakang sepenuhnya ditutupi oleh gambar latar belakang sambil mempertahankan rasio aspek. Seluruh area akan ditanggung. Namun, bagian dari gambar mungkin tidak terlihat jika lebar / tinggi gambar yang diubah ukurannya terlalu besar.

— Vashishtha Jogi
sumber
11
Tutup krop gambar jika rasio aspek tidak cocok, jadi itu bukan solusi umum yang baik.
— mahemoff
1
jika Anda inginnya
— Wreeecks
4
Tampaknya tidak berfungsi di Firefox. Namun, background-size: 100vw 100vh;lakukan triknya dengan baik.
— Yannick Mauray
5
@YannickMauray coba: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
Jika Anda menginginkan ini, tetapi hanya untuk sumbu horizontal, gunakan ini: background-size: 100% auto; stackoverflow.com/questions/41025630/…
— antoineMoPa
470

Anda dapat menggunakan properti CSS3 untuk melakukannya dengan cukup baik. Ini mengubah ukuran untuk rasio sehingga tidak ada distorsi gambar (meskipun itu gambar kecil kelas atas). Perhatikan saja, ini belum diterapkan di semua browser.

background-size: 100%;
— Matt Burgess
sumber
19
@nXqd Itu kode lengkapnya! Buat wadah dengan background-imagedan sertakan properti di atas. Seperti yang disebutkan, dukungan browser belum baik dan ada versi khusus browser yaitu ini. -webkit-background-sizedll. Lihat Modul W3C CSS3: ukuran latar belakang dan css3.info: ukuran latar belakang
— MrWhite
15
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
4
Disarankan juga untuk menambah autorasio aspek.
— Chibueze Opata
186

Menggunakan kodenya saya sebutkan ...

HTML

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

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

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

Itu menghasilkan efek yang diinginkan: hanya konten yang akan menggulir, bukan latar belakang.

Gambar latar belakang diubah ukurannya menjadi viewport browser untuk ukuran layar apa pun. Ketika konten tidak sesuai dengan viewport browser, dan pengguna perlu menggulir halaman, gambar latar tetap di viewport sementara konten bergulir.

Dengan CSS 3 sepertinya ini akan jauh lebih mudah.

— Fábio Antunes
sumber
12
Tapi ini bukan gambar latar belakang. Anda hanya dapat melakukan ini pada blok, tetapi bukan elemen inline seperti input [type = text]. Atau saya salah?
— deerchao
11
tidak perlu untuk class = "stretch", cukup gunakan #background img {} sebagai pengidentifikasi di css
— BerggreenDK
z-index: -1; menjaga gambar Anda di latar belakang. Jika Anda ingin menampilkan gambar Anda di latar depan, Anda dapat meningkatkan nilai indeks-z atau menghapus indeks itu.
— gokhanakkurt
Masalah yang saya alami adalah dengan IE8. Gambar latar belakang DIV membentang penuh tetapi di IE8 gambar melampaui DIV karenanya tidak dapat melihat gambar penuh. Itu akan dipotong. Ini pertanyaan saya: stackoverflow.com/questions/22331179/…
— Si8
1
Kesalahan yang jelas dilakukan orang adalah menempatkan gambar latar belakang dalam css (yaitu dengan background : url("example.png");) dan kemudian menggunakan atribut css di background-size:100%;bawahnya untuk mudah-mudahan skala gambar ke lebar layar. Ini tidak akan berhasil, kan? Jika Anda ingin meletakkan gambar latar belakang untuk tubuh maka atribut gambar harus ditambahkan ke tag tubuh seperti <body background="example.png">. Kemudian gunakan css background-size:100%;untuk skala itu.
— sjsam
166

CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}
— Josh Crozier
sumber
Namun, ini tidak berfungsi di IE8. Ini menciptakan margin di bagian atas dan bawah jendela.
— erdomester
Di Android itu berfungsi ketika menggunakan html, body {...}bukan body {...}.
— Edward
53 
background-size: 100% 100%;

meregangkan latar belakang untuk mengisi seluruh elemen pada kedua sumbu.

— yeahdixon
sumber
40

Bagian CSS berikut harus meregangkan gambar dengan semua browser.

Saya melakukan ini secara dinamis untuk setiap halaman. Karena itu saya menggunakan PHP untuk menghasilkan tag HTML sendiri untuk setiap halaman. Semua gambar ada di folder 'gambar' dan akhiri dengan 'Bg.jpg'.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Jika Anda hanya memiliki satu gambar latar belakang untuk semua halaman maka Anda dapat menghapus $picvariabel, menghapus melarikan diri garis miring, menyesuaikan jalur dan menempatkan kode ini dalam file CSS Anda.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Ini diuji dengan Internet Explorer 9, Chrome 21, dan Firefox 14.

— Thorsten Niehues
sumber
2
Contoh Anda tidak berfungsi dalam arti kompatibilitas ke belakang, karena Anda lupa tentang '-' awalan awalan vendor. Pasti begitu -webkit-background-size, -moz-background-sizedan sebagainya. Lihat developer.mozilla.org/en-US/docs/CSS/… Atau Anda pergi untuk memasukkannya di masa depan-bukti di properti singkat sepertibackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
— Volker E.
Ini adalah satu-satunya solusi yang akan bekerja untuk saya di IE9. Terima kasih.
— robnick
17

Anda sebenarnya dapat mencapai efek yang sama seperti gambar latar belakang dengan tag img. Anda hanya perlu mengatur z-index lebih rendah dari yang lainnya, mengatur posisi: absolut dan menggunakan latar belakang transparan untuk setiap kotak di latar depan.

— Kim Stebel
sumber
Itulah yang saya lihat di pertanyaan SO yang lain, dan berfungsi, tetapi sejak CSS3 keluar, saya pikir sekarang adalah cara yang lebih baik.
— Fábio Antunes
3
Mungkin ada dan mempertimbangkan perkembangan akun dalam penggunaan browser, Anda mungkin dapat menggunakannya secara komersial hanya dalam 10 tahun?
— Kim Stebel
Menjadi CSS3, tidak ada yang salah dengan menggunakan properti yang browser paling modern lihat dan memberikan standar minimum untuk browser yang tidak didukung. Di sini, misalnya, Anda mungkin dapat menggunakan latar belakang ubin yang membosankan tetapi dapat diterima untuk <IE8 dan gambar yang bagus untuk Firefox / Chrome / Safari / Opera. Juga, ada banyak polyfill untuk mereplikasi fungsionalitas CSS3 di browser lama dengan JavaScript. Dengan kata lain, Anda tidak perlu menunggu setiap browser untuk mendukung CSS3 untuk menggunakannya.
— Dan Blows
Baru saja menemukan posting lain ini yang merujuk pada penggunaan MS
— AlphaImageLoader
17

Gunakan CSS ini:

background: url('img.png') no-repeat; 
background-size: 100%;
— RSH1
sumber
15

Ini dijelaskan oleh trik CSS: Gambar Latar Belakang Halaman Penuh Sempurna

Demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

Kode:

body {
  background: url(images/myBackground.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
— Aamer Shahzad
sumber
berdasarkan jawaban di atas, saya telah melihat perbaikan lampiran latar belakang tidak berfungsi pada perangkat seluler dan microsoft edge. Solusi sempurna untuk membuat peregangan latar belakang dan memperbaiki semua perangkat dan browser. Saya sarankan jquery-backstretch.com
— Aamer Shahzad
15

Anda dapat menambahkan kelas ini ke file CSS Anda.

.stretch {
    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;
}

Ia bekerja di:

  • Safari 3 atau lebih baru
  • Chrome Terserah atau lambat
  • Internet Explorer 9 atau lebih baru
  • Opera 10 atau lebih baru (Opera 9.5 didukungbackground-size , tetapi bukan kata kunci)
  • Firefox 3.6 atau yang lebih baru (Firefox 4 mendukung versi awalan non-vendor)
— Arunraj S
sumber
Ini adalah jawaban yang cocok untuk bekerja. Catatan: rasio aspek akan berubah.
— devdrc
10

Untuk mengatur skala gambar Anda secara tepat berdasarkan ukuran wadah, gunakan yang berikut ini:

background-size: contain;
background-repeat: no-repeat;
— justinpees
sumber
9

Saya menggunakan ini, dan berfungsi dengan semua browser:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— Mahdi jokar
sumber
9

Terima kasih!

Tapi kemudian itu tidak bekerja untuk Google Chrome dan Safari browser (peregangan bekerja, tapi hight gambar hanya 2 mm!) , Sampai seseorang mengatakan kepada saya apa yang kurang:

Coba atur height:auto;min-height:100%;

Jadi ubah itu untuk height:100%;baris Anda , berikan:

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

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

Tepat sebelum kode yang baru ditambahkan saya memilikinya di tema Drupal Tendu saya style.css:

html, tubuh {tinggi: 100%;}

#page {background: #ffffff; tinggi: otomatis! penting; tinggi: 100%; tinggi minimum: 100%; posisi: relatif;}

Maka saya harus membuat blok baru di dalam Drupal dengan gambar sambil menambahkan class=stretch:

<img alt = "" class = "stretch" src = "pic.url" />

Hanya menyalin gambar dengan editor di blok Drupal tidak berfungsi; kita harus mengubah editor menjadi teks yang tidak diformat.

— Cybr
sumber
8

Saya setuju dengan gambar dalam div absolut dengan lebar dan tinggi 100%. Pastikan Anda mengatur lebar dan tinggi 100% untuk tubuh di CSS dan mengatur margin dan bantalan ke nol. Masalah lain yang Anda akan temukan dengan metode ini adalah bahwa ketika memilih teks, area pemilihan kadang-kadang dapat mencakup gambar latar belakang, yang memiliki efek yang disayangkan membuat halaman penuh memiliki keadaan yang dipilih. Anda bisa menyelesaikan ini dengan menggunakan user-select:noneaturan CSS, seperti:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

Sekali lagi, Internet Explorer adalah penjahat di sini, karena tidak mengenali opsi pilih pengguna - bahkan pratinjau Internet Explorer 10 tidak mendukungnya, jadi Anda memiliki opsi untuk menggunakan JavaScript untuk mencegah pemilihan gambar latar belakang (misalnya, http : //www.felgall.com/jstip35.htm ) atau menggunakan metode latar belakang CSS 3 .

Juga, untuk SEO saya akan meletakkan gambar latar belakang di bagian bawah halaman, tetapi jika gambar latar belakang terlalu lama untuk memuat (yaitu, dengan latar belakang putih awalnya), Anda bisa pindah ke bagian atas halaman.

— Myke Black
sumber
maka jangan gunakan img hanya div dengan bg itu tidak boleh dipilih
— Jacek Pietal
7

Saya ingin memusatkan dan skala gambar latar belakang, tanpa merentangkannya ke seluruh halaman, dan saya ingin rasio aspek dipertahankan. Ini berhasil bagi saya, berkat variasi yang disarankan dalam jawaban lain:

GAMBAR INLINE: ------------------------

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

CSS ----------------------------------

html {
    height:100%;
}

#background {
    text-align: center;
    width: 100%; 
    height: 100%; 
    position: fixed;
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

.stretch {
    margin: auto;
    height:100%;
}
— AnnieDee
sumber
5

Saya menggunakan kombinasi properti CSS background-X untuk mencapai gambar latar scaling yang ideal.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Ini membuat latar belakang selalu menutupi seluruh jendela browser dan tetap terpusat saat penskalaan.

— Ryan Den-Kaat
sumber
4

Gunakan plugin Backstretch . Satu bahkan dapat memiliki beberapa slide gambar. Ini juga berfungsi dalam wadah. Dengan cara ini misalnya seseorang hanya dapat memiliki sebagian dari latar belakang ditutupi dengan gambar latar belakang.

Karena bahkan saya bisa membuatnya berfungsi membuktikannya menjadi plugin yang mudah digunakan :).

— Daniel
sumber
3

Jika Anda ingin konten terpusat secara horizontal, gunakan kombinasi seperti ini:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Ini akan terlihat cantik.

— Samuel Ramzan
sumber
1

Anda dapat menggunakan border-image : yourimageproperti untuk memperbesar gambar hingga ke perbatasan. Bahkan jika Anda memberikan gambar latar belakang, gambar perbatasan akan digambar di atasnya.

The border-imageproperti sangat berguna jika style sheet diimplementasikan di suatu tempat yang tidak mendukung CSS 3. Jika Anda menggunakan Google Chrome atau Firefox, maka saya sarankan background-size:coverproperti itu sendiri.

— Natesh bhat
sumber
0

Apakah Anda ingin mencapai ini hanya dengan menggunakan satu gambar? Karena Anda sebenarnya dapat membuat sedikit mirip dengan latar belakang peregangan menggunakan dua gambar. Gambar PNG misalnya.

Saya pernah melakukan ini sebelumnya, dan itu tidak sulit. Selain itu, saya pikir peregangan hanya akan merusak kualitas latar belakang. Dan jika Anda menambahkan gambar besar itu akan memperlambat komputer dan browser yang lambat.

— MarioRicalde
sumber
Poin yang bagus. Tapi saya menggunakan jpg untuk gambar latar belakang, dia sekitar 1500x1000 hanya membutuhkan sedikit lebih dari 100kb. Tetapi bagaimana Anda melakukannya?
— Fábio Antunes
1
Bagaimana dengan memusatkan gambar secara horizontal dan melembutkan tepi gambar dengan warna atau pola yang solid? Ini akan memungkinkan Anda untuk memiliki adaptasi yang mulus jika pengguna memiliki lebih dari resolusi gambar.
— MarioRicalde
Tetapi saya ingin gambar mengisi latar belakang. Yang Anda katakan, itulah yang biasanya saya lakukan.
— Fábio Antunes
0

Berikut ini bekerja untuk saya.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

yang bekerja untuk menutupi seluruh latar belakang pada dimensi yang berbeda

— nada2 tony2
sumber
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.