Image d'arrière-plan Extensible 100% de la Hauteur de la Div

J'ai un conteneur qui va grandir/rétrécir en hauteur en fonction de la façon dont beaucoup de texte dynamique est placé à l'intérieur d'elle. Le conteneur va avoir une image de fond qui doit s'étirer/rétrécir comme le conteneur des changements de hauteur et cette image ne peut pas être coupée en aucune façon. Je me demande comment j'style .container pour obtenir l'image de fond d'écran à rester 100% de la div.

J'ai essayé ce qui suit, mais il n'a pas l'air de fonctionner:

.container { background: url('backgroundImage.jpg') 0 100% no-repeat; }

Échantillon de Structure HTML:

<div class="container">
  <p class="text">This is a short container</p>
</div>

<div class="container">
  <p class="text">This<br> is<br> a<br> tall<br> container</p>
</div>
css-tricks.com/perfect-full-page-background-image

OriginalL'auteur Jon | 2012-11-23

  1. 32

    Vous devez définir la background-size de la propriété.
    background-size: 100% 100%; de mise à l'échelle pour remplir le contenant à la fois horizontalement et verticalement.

    D'habitude, je préfère background-size: cover; comme ça gracieusement redimensionne l'image en tant que de besoin, de maintenir le ratio d'aspect. Assurez-vous de vérifier la soutien de fond de taille, car c'est une assez nouvelle propriété.

    remarquez que c'est du css3.
    CSS3 est très bien 🙂 Qui fait exactement ce dont j'avais besoin.
    L'amour css3 tellement.
    Vous m'avez sauvé beaucoup de temps, thx!

    OriginalL'auteur Henrik

  2. 9

    En cas background-size: contain; n'est pas utile, et si vous êtes à la recherche pour la HAUTEUR de l'image de fond, sans perdre l'aspect ratio ensuite utiliser ci-dessous écrit CSS

    background-size: auto 100%;

    régler en premier paramètre à "auto" veillera à ce que l'image de garder la largeur dans le rapport de la hauteur. Second paramètre qui est "100%" aidera image d'arrière-plan s'adapter à la même hauteur que DIV.

    Je pense que ce doit être la bonne réponse. Il convient de répondre à la question et il fonctionne (prise en charge du navigateur de côté).
    Personnellement, je crois que background-size: cover est la réponse correcte. Ma réponse ne peut qu'aider si @henrik réponse n'est pas de travail. Cependant, il devrait fonctionner dans la plupart des cas.

    OriginalL'auteur Nizam Kazi

  3. 4

    Avez-vous essayé background-size: cover; ?

    Dans votre exemple, vous réglez background-position.

    OriginalL'auteur gregory

  4. 3

    Il est une propriété css3 appelé comme background-size:cover; background-size:contiennent;. Vous pouvez utiliser background-size:cover; pour répondre à vos besoins.

    **contain

    Spécifie que l'image d'arrière-plan doit être mis à l'échelle pour être aussi grand que
    possible, tout en veillant à la fois ses dimensions sont inférieures ou égales à
    les dimensions correspondantes de l'arrière-plan de zone de positionnement.

    cover

    Spécifie que l'image d'arrière-plan doit être mis à l'échelle pour être aussi petite que
    possible, tout en veillant à la fois ses dimensions sont supérieures ou égales
    pour les dimensions correspondantes de l'arrière-plan de zone de positionnement.

    **

    OriginalL'auteur defau1t