Ajustar imagen de fondo a div

Tengo una imagen de fondo en el siguiente div, pero la imagen se corta:

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

¿Hay alguna manera de mostrar la imagen de fondo sin cortarla?

Puede lograr esto con la background-sizepropiedad, que ahora es compatible con la mayoría de los navegadores .

Para escalar la imagen de fondo para que quepa dentro del div:

background-size: contain;

Para escalar la imagen de fondo para cubrir todo el div:

background-size: cover;

JSFiddle ejemplo

También existe un filtro para el soporte de IE 5.5+ , así como prefijos de proveedores para algunos navegadores más antiguos .

Si lo que necesita es que la imagen tenga las mismas dimensiones del div, creo que esta es la solución más elegante:

background-size: 100% 100%;

Si no, la respuesta de @grc es la más apropiada.

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

Puedes usar estos atributos:

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

y tu código es así:

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

también usas esto:

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

No sé sus valores div, pero supongamos que los tiene.

height: auto;
max-width: 600px;

De nuevo, esos son solo números aleatorios. Podría ser bastante difícil hacer la imagen de fondo (si lo desea) con un ancho fijo para el div, así que mejor use max-width. Y en realidad no es complicado llenar un div con una imagen de fondo, solo asegúrese de diseñar el elemento padre de la manera correcta, para que la imagen tenga un lugar al que pueda ir.

Chris