Ajustar a imagem de fundo à div

Eu tenho uma imagem de plano de fundo na seguinte div, mas a imagem é cortada:

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

Existe uma maneira de mostrar a imagem de fundo sem cortá-la?

Você pode conseguir isso com a background-sizepropriedade, que agora é suportada pela maioria dos navegadores .

Para dimensionar a imagem de fundo para caber dentro da div:

background-size: contain;

Para dimensionar a imagem de plano de fundo para cobrir toda a div:

background-size: cover;

Exemplo JSFiddle

Também existe um filtro para suporte ao IE 5.5+ , além de prefixos de fornecedor para alguns navegadores mais antigos .

Se o que você precisa é que a imagem tenha as mesmas dimensões da div, acho que esta é a solução mais elegante:

background-size: 100% 100%;

Caso contrário, a resposta do @grc é a mais apropriada.

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

Você pode usar estes atributos:

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

e você codifica é assim:

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

você também usa isso:

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

Não conheço seus valores div, mas vamos supor que você os tenha.

height: auto;
max-width: 600px;

Novamente, esses são apenas números aleatórios. Pode ser muito difícil criar uma imagem de plano de fundo (se você desejar) com uma largura fixa para a div, portanto, use melhor a largura máxima. E, na verdade, não é complicado preencher uma div com uma imagem de plano de fundo, apenas certifique-se de estilizar o elemento pai da maneira certa, para que a imagem tenha um lugar para onde ela possa ir.

Chris