Ajustement de l'image de fond à la div
j'ai une image de fond dans la div 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 de montrer l'image de fond sans la couper?
4 réponses
vous pouvez y arriver avec la propriété background-size , qui est maintenant supportée par la plupart des navigateurs .
pour ajuster l'image de fond à l'intérieur de la div:
background-size: contain;
pour mettre à l'échelle l'image de fond pour couvrir l'ensemble de la div:
background-size: cover;
il existe aussi un filtre pour IE 5.5 + prise en charge , ainsi que préfixes fournisseurs pour certains navigateurs plus anciens .
Si vous avez besoin de l'image pour avoir les mêmes dimensions de 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 aussi utiliser 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 sont des nombres aléatoires. Il pourrait être assez difficile de faire l'image de fond (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 un div avec une image d'arrière-plan, assurez-vous que vous style l'élément parent de la bonne façon, de sorte que l'image a un endroit qu'il peut aller dans.
Chris
C'est soit vous changez la largeur et la hauteur de votre div, soit vous définissez la taille de l'arrière-plan.