Images d'arrière-plan: comment remplir une div entière si l'image est petite et vice versa

Question

J'ai trois problèmes:

1. Lorsque j'ai essayé d'utiliser une image d'arrière-plan dans une div de plus petite taille, la div ne montre qu'une partie de l'image. Comment puis-je afficher la totalité ou une partie spécifique de l'image?

2. J'ai une image plus petite et je veux l'utiliser dans une div plus grande. Mais ne voulez pas utiliser la fonction de répétition.

3. Existe-t-il un moyen en CSS de manipuler l'opacité d'une image?

Answer 1

Redimensionnez l'image pour l'adapter à la taille div.
Avec CSS3, vous pouvez le faire:

 #yourdiv /* with CSS 3 */
{  
 background: url(bgimage.jpg) no-repeat;
 background-size: 100%;
}
 

Comment étirer une image d'arrière-plan dans une page Web :

À propos de l'opacité

 #yourdiv
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
 

Ou regardez l' opacité / transparence des images CSS

Answer 2

Pour agrandir automatiquement l'image et couvrir toute la section div sans laisser aucune partie non remplie, utilisez:

 background-size: cover;
 

Answer 3

Plutôt que de donner background-size:100%;
Nous pouvons donner background-size:contain;
Vérifiez ceci pour différentes options disponibles: http://www.css3.info/preview/background-size/

Answer 4

1. Je suis d'accord avec yossi exemple, étirer l'image pour l'adapter à la div mais d'une manière légèrement différente (sans image de fond d'écran comme c'est un peu rigide dans css 2.1). Montrer l'image complète:

   <div id="yourdiv"> <img id="theimage" src="image.jpg" alt="" /> </div>

   #yourdiv img { width:100%; /*height will be automatic to remain aspect ratio*/ }

2. Montrent qu'une partie de l'image à l'aide de background-position:

   #yourdiv { background-image: url(image.jpg); background-repeat: no-repeat; background-position: 10px 25px; }

3. même que la première partie de 1. l'image mise à l'échelle pour la div, donc plus ou moins à la fois travailler

4. même que yossi l'