web-dev-qa-db-fra.com

Ajuster l'image de fond pour 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">

Est-il possible d'afficher l'image d'arrière-plan sans la couper?

htmlcssbackground-image
263
Rajeev

Vous pouvez y parvenir avec la propriété background-size qui est maintenant pris en charge par la plupart des navigateurs .

Pour redimensionner l’image d’arrière-plan à l’intérieur du div:

background-size: contain;

Pour redimensionner l'image d'arrière-plan afin de couvrir l'ensemble de la div:

background-size: cover;

_ { Exemple de JSFiddle

Il existe également un filtre pour le support de IE 5.5+ }, ainsi que préfixes de fournisseur pour certains navigateurs plus anciens .

547
grc

Si ce dont vous avez besoin est que l'image ait 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

82
Sertage

vous utilisez aussi ceci:

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

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

height: auto;
max-width: 600px;

Encore une fois, ce ne sont que des nombres aléatoires ... Il peut être assez difficile de créer une image de fond (si vous le souhaitez) avec une largeur fixe pour la div, il est donc préférable d’utiliser Max-width. Et en réalité, remplir une div avec une image d’arrière-plan n’est pas compliqué, assurez-vous simplement que vous appelez l’élément parent de la bonne façon, afin que l’image ait un emplacement où elle puisse aller.

Chris 

8
Christian

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">
0
hojjat.mi