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

334

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?

html css background-image Rajeev
la source
L'image est-elle plus grande que le div?
grc
1
oui l'image est plus grande que la div
Rajeev
1
image d'arrière-plan: url (/media/img_1_bg.jpg); taille de l'arrière-plan: contenir; background-repeat: pas de répétition;
Waruna Manjula

Réponses:

672

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 .

grc
la source
119

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

Sertage
la source
Enfin, j'ai trouvé la solution pour adapter toute la div à l'arrière-plan. Je vous remercie!
Kamil Rykowski
5
mais cela étirerait l'image ... existe-t-il un moyen d'ajuster l'image d'arrière-plan sans l'étirer?
Junaid
1
Le rapport hauteur / largeur a cependant perdu.
Apprenant
@Learner Si vous modifiez les dimensions d'une image sans recadrer l'image, le rapport hauteur / largeur sera perdu 99% du temps. C'est du bon sens.
Vaibhav Vishal
11

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">
hojjat.mi
la source
8

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

Christian
la source
Lien vers une réponse très votée qui parle de cette solution plus en détail: stackoverflow.com/questions/600743/… et vous montre comment calculer le padding-top.
John Lee