Images d’arrière-plan: comment remplir toute div si l’image est petite et vice versa

J’ai trois problèmes:

  1. Lorsque j’ai essayé d’utiliser une image d’arrière-plan avec une div plus petite, le div affiche uniquement une partie de l’image. Comment puis-je afficher l’intégralité ou une partie spécifique de l’image?

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

  3. Existe-t-il un moyen dans CSS pour manipuler l’opacité d’une image?

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

/* with CSS 3 */ #yourdiv { background: url('bghttps://stackoverflow.com/questions/4779577/background-images-how-to-fill-whole-div-if-image-is-small-and-vice-versa/image.jpg') no-repeat; background-size: 100%; } 

Comment étirez-vous 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 CSS Opacité Image / Transparence

Pour agrandir automatiquement l’image et couvrir la totalité de la section div sans en laisser aucune partie, utilisez:

 background-size: cover; 

Essayez ci-dessous le segment de code, je l’ai essayé moi-même avant:

 #your-div { background: url("your-image-link") no-repeat; background-size: cover; background-clip: border-box; } 

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

Cela a parfaitement fonctionné pour moi

 background-repeat: no-repeat; background-size: 100% 100%; 

Cela fonctionnera comme un charme.

 background-image:url("http://assets.toptal.io/uploads/blog/category/logo/4/php.png"); background-repeat: no-repeat; background-size: contain; 
  1. Je suis d’accord avec l’exemple de Yossi, étirer l’image pour l’adapter à la div, mais d’une manière légèrement différente (sans image d’arrière-plan, car cela est un peu rigide dans CSS 2.1). Afficher l’image complète:

     
    #yourdiv img { width:100%; /*height will be automatic to remain aspect ratio*/ }
  2. Afficher une partie de l’image en utilisant la position d’arrière-plan:

     #yourdiv { background-image: url(https://stackoverflow.com/questions/4779577/background-images-how-to-fill-whole-div-if-image-is-small-and-vice-versa/image.jpg); background-repeat: no-repeat; background-position: 10px 25px; } 
  3. Identique à la première partie de (1) l’image sera redimensionnée à la div si plus ou moins grande travaillera

  4. Identique à celui de Yossi.