Ajuster l'image de fond au div

Question

J'ai une image de fond dans la division suivante, 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">

Y a-t-il un moyen d'afficher l'image de fond sans la couper ?

Answer 1

Vous pouvez y parvenir avec l'option background-size qui est maintenant supporté par la plupart des navigateurs .

Pour mettre à l'échelle l'image d'arrière-plan afin qu'elle tienne dans le div :

background-size: contain;

Pour mettre à l'échelle l'image d'arrière-plan afin de couvrir la totalité de la division :

background-size: cover;

Exemple de JSFiddle

Il existe également un Filtre pour le support d'IE 5.5+. ainsi que préfixes des fournisseurs pour certains navigateurs plus anciens .

Answer 2

Si ce dont vous avez besoin est que l'image ait les mêmes dimensions que la division, 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

Answer 3

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

Answer 4

background-position-x: center;
background-position-y: center;

Answer 5

Vous utilisez aussi ceci :

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

Je ne connais pas vos valeurs de div, mais supposons que vous les avez.

height: auto;
max-width: 600px;

Encore une fois, il ne s'agit que de chiffres aléatoires. Il pourrait être assez difficile de créer une image d'arrière-plan (si vous le souhaitez) avec une largeur fixe pour la division, il vaut mieux utiliser la largeur maximale. En fait, il n'est pas compliqué de remplir un div avec une image d'arrière-plan, il suffit de s'assurer que le style de l'élément parent est le bon, afin que l'image ait un endroit où aller.

Chris