Paskan gambar latar belakang ke div

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?

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 .

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

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

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