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




mettre une image en arriere plan html (6)

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

/* with CSS 3 */
#yourdiv {  
    background: url('bgimage.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

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?


  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:

    <div id="yourdiv">
        <img id="theimage" src="image.jpg" alt="" />
    </div>
    
    #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(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.


Cela a parfaitement fonctionné pour moi

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

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;
}


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

background-size: cover;






opacity