Paskan gambar latar belakang ke div

334

Saya memiliki gambar latar belakang di div berikut, tetapi gambar terpotong:

 <div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center">

Apakah ada cara untuk menampilkan gambar latar belakang tanpa memotongnya?

html css background-image

— Rajeev
sumber

Apakah gambar lebih besar dari div?

— grc

1

ya gambar lebih besar dari div

— Rajeev

1

background-image: url (/media/img_1_bg.jpg); ukuran latar: mengandung; background-repeat: no-repeat;

— Waruna Manjula

672

Anda dapat mencapai ini dengan background-sizeproperti, yang sekarang didukung oleh sebagian besar browser .

Untuk mengatur skala gambar latar belakang agar pas di dalam div:

background-size: contain;

Untuk skala gambar latar belakang untuk menutupi seluruh div:

background-size: cover;

Contoh JSFiddle

Ada juga filter untuk dukungan IE 5.5+ , serta awalan vendor untuk beberapa browser lama .

— grc
sumber

119

Jika yang Anda butuhkan adalah gambar memiliki dimensi div yang sama, saya pikir ini adalah solusi paling elegan:

background-size: 100% 100%;

Jika tidak, jawaban oleh @grc adalah yang paling tepat.

Sumber: http://www.w3schools.com/cssref/css3_pr_background-size.asp

— Sertage
sumber

Akhirnya saya menemukan solusi untuk menyesuaikan seluruh div dengan latar belakang. Terima kasih!

— Kamil Rykowski

5

tetapi ini akan meregangkan gambar ... apakah ada cara untuk menyesuaikan gambar latar belakang tanpa merentangkannya?

— Junaid

1

Namun, aspek rasio hilang.

— Pelajar

@Pelajar Jika Anda mengubah dimensi gambar tanpa memotong gambar, rasio aspek akan hilang 99% dari waktu. Itu masuk akal.

— Vaibhav Vishal

11

Anda dapat menggunakan atribut ini:

background-size: contain;
background-repeat: no-repeat;

dan kode Anda kemudian seperti ini:

 <div style="text-align:center;background-image: url(/media/img_1_bg.jpg); background-size: contain;
background-repeat: no-repeat;" id="mainpage">

— hojjat.mi
sumber

8

Anda juga menggunakan ini:

background-size:contain;
height: 0;
width: 100%;
padding-top: 66,64%;

Saya tidak tahu nilai div Anda, tapi anggaplah Anda sudah mendapatkannya.

height: auto;
max-width: 600px;

Sekali lagi, itu hanya angka acak. Ini bisa sangat sulit untuk membuat gambar latar belakang (jika Anda mau) dengan lebar tetap untuk div, jadi lebih baik gunakan max-width. Dan sebenarnya tidak rumit untuk mengisi div dengan gambar latar belakang, pastikan Anda menata elemen induk dengan cara yang benar, sehingga gambar memiliki tempat yang dapat dituju.

Chris

— Kristen
sumber

Tautkan ke jawaban yang sangat tinggi yang membahas tentang solusi ini secara lebih rinci: stackoverflow.com/questions/600743/… dan tunjukkan cara menghitung padding-top.

— John Lee