Saya
body {
background: url(images/background.svg);
}
Efek yang diinginkan adalah bahwa ini gambar latar belakang akan memiliki lebar yang sama dengan halaman, mengubah ketinggian untuk mempertahankan proporsi. misalnya jika gambar asli terjadi menjadi 100*200 (semua unit) dan tubuh 600px lebar, gambar latar belakang harus berakhir menjadi 1200px tinggi. Ketinggian harus berubah secara otomatis jika jendela ukurannya. Apakah ini mungkin?
Pada saat ini, Firefox terlihat seperti itu's membuat ketinggian fit dan kemudian menyesuaikan lebar. Ini mungkin karena tingginya dimensi terpanjang dan's mencoba untuk menghindari tanam? I ingin untuk tanaman secara vertikal, kemudian gulir: tidak ada pengulangan horisontal.
Juga, Chrome adalah menempatkan gambar di tengah, tidak ada ulangi, bahkan ketika background-repeat:repeat
diberikan secara eksplisit, yang merupakan default pula.
Ada CSS3 properti untuk ini, yaitu background-size
(cek kompatibilitas). Sementara satu dapat mengatur nilai panjang, it's biasanya digunakan dengan nilai-nilai khusus yang berisi
dan tutup
. Dalam kasus tertentu, anda harus menggunakan cover
:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
berisi
dan tutup
Maaf untuk yang buruk pun, tapi aku'm akan menggunakan gambar di malam hari dengan Biswarup Ganguly untuk demonstrasi. Mari kita mengatakan bahwa ini adalah layar anda, dan area abu-abu di luar anda terlihat layar. Untuk demonstrasi, I'm akan menganggap 16x9 rasio.
Kami ingin menggunakan gambar tersebut hari sebagai latar belakang. Namun, kami dipotong gambar untuk 4x3 untuk beberapa alasan. Kita bisa mengatur background-size
properti untuk beberapa panjang tetap, tapi kami akan fokus pada berisi
dan tutup
. Perhatikan bahwa saya juga menganggap bahwa kita tidak't mangle lebar dan/atau tinggi tubuh
.
berisi
mengandung Skala gambar, sambil menjaga aspek intrinsik ratio (jika ada), untuk ukuran terbesar yang lebar dan tingginya dapat muat di dalam latar belakang posisi daerah.
Hal ini membuat yakin bahwa gambar latar belakang ini selalu benar-benar terkandung dalam latar belakang posisi daerah, namun, mungkin ada beberapa ruang kosong diisi dengan background-color
dalam hal ini:
cover
cover Skala gambar, sambil menjaga aspek intrinsik ratio (jika ada), untuk ukuran terkecil yang lebar dan tinggi benar-benar dapat menutupi latar belakang posisi daerah.
Hal ini membuat yakin bahwa gambar latar belakang adalah meliputi segala sesuatu. Tidak akan ada yang terlihat background-color
, namun tergantung pada layar's rasio yang besar bagian dari gambar anda dapat memotong:
div > div {
background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
background-repeat: no-repeat;
background-position: center center;
background-color: #ccc;
border: 1px solid;
width: 20em;
height: 10em;
}
div.contain {
background-size: contain;
}
div.cover {
background-size: cover;
}
/********************************************
Additional styles for the explanation boxes
*********************************************/
div > div {
margin: 0 1ex 1ex 0;
float: left;
}
div + div {
clear: both;
border-top: 1px dashed silver;
padding-top:1ex;
}
div > div::after {
background-color: #000;
color: #fefefe;
margin: 1ex;
padding: 1ex;
opacity: 0.8;
display: block;
width: 10ex;
font-size: 0.7em;
content: attr(class);
}
<div>
<div class="contain"></div>
<p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
</p>
</div>
<div>
<div class="cover"></div>
<p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code><div></code>.</p>
</div>
Berdasarkan tips dari https://developer.mozilla.org/en-US/docs/CSS/background-size aku end up dengan resep berikut yang bekerja untuk saya
body {
overflow-y: hidden ! important;
overflow-x: hidden ! important;
background-color: #f8f8f8;
background-image: url('index.png');
/*background-size: cover;*/
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
I'm tidak yakin apa yang anda'kembali mencari persis, tetapi anda benar-benar harus memeriksa ini setiap posting blog yang ditulis oleh Chris Coyier dari CSS-Tricks:
http://css-tricks.com/how-to-resizeable-background-image/
http://css-tricks.com/perfect-full-page-background-image/
Baca deskripsi untuk setiap artikel dan melihat apakah mereka're apa yang anda're looking for.
Yang pertama menjawab pertanyaan berikut:
Apakah ada cara untuk membuat latar belakang gambar resizeable? Seperti dalam, mengisi latar belakang dari halaman web edge-to-edge dengan sebuah gambar, tidak peduli ukuran jendela browser. Juga, memiliki ukuran yang lebih besar atau lebih kecil sebagai jendela browser perubahan. Juga, pastikan mempertahankan rasio (doesn't peregangan aneh). Juga, doesn't menyebabkan scrollbar, hanya memotong secara vertikal jika perlu. Juga, masuk pada halaman seperti inline tag.
Kedua pos's tujuan adalah untuk mendapatkan sebagai berikut, "latar belakang gambar pada sebuah situs web yang menutupi seluruh jendela browser di semua kali. "
Semoga ini bisa membantu.
Coba ini,
element.style {
background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}
Hanya menambahkan satu baris:
.your-class {
height: 100vh;
}
vh lebih tinggi viewport. Ini secara otomatis akan skala untuk menyesuaikan perangkat' jendela browser.
Cek lebih lanjut di sini: https://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window?rq=1
Gambar latar belakang yang tidak Diatur Sempurna maka nya css masalah buat jadi nya file css untuk mengubah kode di bawah ini
html {
background-image: url("example.png");
background-repeat: no-repeat;
background-position: 0% 0%;
background-size: 100% 100%;
}
%; background-size: 100% 100%;"
Saya memiliki masalah yang sama, tidak dapat mengubah ukuran gambar ketika menyesuaikan browser dimensi.
Kode:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
}
Kode:
html {
background-color: white;
background-image: url("example.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-size: contain;
}
Kuncinya di sini adalah penambahan elemen ini -> latar belakang-ukuran: berisi;
Berikut ini's apa yang bekerja untuk saya:
background-size: auto 100%;
Pengaturan latar belakang ukuran tidak membantu, berikut solusi yang bekerja untuk saya:
.class {
background-image: url(blablabla.jpg);
/* Add this */
height: auto;
}
Pada dasarnya tanaman gambar dan membuatnya cocok, background-size: mengandung/cover
tidak't make it fit.