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?


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

Jawaban:



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


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">

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


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