Comment étirer l'image de fond pour remplir une div.

Question

Je veux définir une image de fond pour différents divs, mais mes problèmes sont les suivants:

1. La taille de l'image est fixée (60px).
2. Taille variable de la div

Comment puis-je étirer le fond pour remplir tout le fond 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;
}
 

Vérifiez le code ici.

Answer 1

Ajouter

 background-size:100%;
 

à votre css sous background-image.

Vous pouvez également spécifier les dimensions exactes, à savoir:

 background-size: 30px 40px;
 

Ici: JSFiddle

Answer 2

Vous pouvez utiliser:

 background-size: cover;
 

Ou utilisez simplement une grande image de fond avec:

 background: url('../images/teaser.jpg') no-repeat center #eee;
 

Answer 3

Pour cela, vous pouvez utiliser css3 background-size property. Écrivez 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/

Answer 4

Vous pouvez ajouter:

 #div2{
    background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png);
    background-size: 100% 100%;
    height:180px;
    width:200px;
    border: 1px solid red;
}
 

En savoir plus à ce sujet, vous pouvez ici: css3 background-size