Ajuster l'image d'arrière-plan à div

J'ai une image d'arrière-plan dans le div suivant, mais l'image est coupée:

 <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-t-il un moyen d'afficher l'image d'arrière-plan sans la couper?

Vous pouvez y parvenir avec la background-sizepropriété, qui est désormais prise en charge par la plupart des navigateurs .

Pour redimensionner l'image d'arrière-plan pour qu'elle tienne à l'intérieur du div:

background-size: contain;

Pour mettre l'image d'arrière-plan à l'échelle afin de couvrir l'ensemble du div:

background-size: cover;

Exemple JSFiddle

Il existe également un filtre pour la prise en charge d'IE 5.5+ , ainsi que des préfixes de fournisseurs pour certains navigateurs plus anciens .

Si vous avez besoin de l'image pour avoir les mêmes dimensions que la div, je pense que c'est la solution la plus élégante:

background-size: 100% 100%;

Sinon, la réponse de @grc est la plus appropriée.

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

Vous pouvez utiliser ces attributs:

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

et votre code est alors comme ceci:

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

vous utilisez également ceci:

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

Je ne connais pas vos div-values, mais supposons que vous les avez.

height: auto;
max-width: 600px;

Encore une fois, ce ne sont que des nombres aléatoires. Il pourrait être assez difficile de créer l'image d'arrière-plan (si vous le souhaitez) avec une largeur fixe pour le div, donc mieux utiliser max-width. Et en fait, il n'est pas compliqué de remplir une div avec une image d'arrière-plan, assurez-vous simplement de styliser l'élément parent de la bonne façon, afin que l'image ait un endroit où elle peut aller.

Chris