[css] Comment étirer l'image de fond pour remplir une div
3
Answers
Vous pouvez utiliser:
background-size: cover;
Ou utilisez simplement une grande image de fond avec:
background: url('../images/teaser.jpg') no-repeat center #eee;
Question
Je veux définir une image de fond à différents divs, mais mes problèmes sont les suivants:
- La taille de l'image est fixe (60px).
- Variation de la taille de div
Comment puis-je étirer l'image de fond pour remplir tout l'arrière-plan de la div?
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
height:180px;
width:200px;
border: 1px solid red;
}
Pour cela, vous pouvez utiliser la propriété CSS3 background-size . Ecrire comme ceci:
#div2{
background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
background-size:100% 100%;
height:180px;
width:200px;
border: 1px solid red;
}
Vérifiez ceci: http://jsfiddle.net/qdzaw/1/
en utilisant la propriété css:
background-size: cover;
Pour conserver le format, utilisez la background-size: 100% auto;
div {
background-image: url('image.jpg');
background-size: 100% auto;
width: 150px;
height: 300px;
}
css 
html