web-dev-qa-db-fra.com

Image de fond sensible en pleine largeur div

J'essaie de comprendre comment créer une image d'arrière-plan dans une largeur totale div et réactive. L'image d'arrière-plan s'étend sur toute la largeur de la page (et réagit), mais la hauteur de l'image ne correspond pas à sa hauteur maximale. On dirait que c'est coupé d'une certaine manière. J'utilise le framework bootstrap, et la raison pour laquelle j'essaie de le faire est que je veux superposer du texte sur l'image. J'ai essayé tellement de choses différentes mais je n'arrive pas à comprendre, aidez-moi! 

<div class="bg-image">
  <div class="container">
    <div class="row-fluid">
      <div class="span12">
        <h1>This is some text</h1>
      </div>
    </div>
  </div>
</div>


  .bg-image {
  background: url(img/image.jpg) no-repeat center top;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  max-height: 450px;
  }
htmlcsstwitter-bootstrapresponsive-designbackground-image
14
Drew

Voici une façon d'obtenir le design que vous souhaitez.

Commencez avec le code HTML suivant:

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div class="nav">nav area</div>
            <div class="bg-image">
                <img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
                 <h1>This is centered text.</h1>
            </div>
            <div class="main">main area</div>
        </div>
    </div>
</div>

Notez que l'image d'arrière-plan fait maintenant partie du flux normal du document.

Appliquez le CSS suivant:

.bg-image {
    position: relative;
}
.bg-image img {
    display: block;
    width: 100%;
    max-width: 1200px; /* corresponds to max height of 450px */
    margin: 0 auto;
}
.bg-image h1 {
    position: absolute;
    text-align: center;
    bottom: 0;
    left: 0;
    right: 0;
    color: white;
}
.nav, .main {
    background-color: #f6f6f6;
    text-align: center;
}

Comment ça marche

L'image est définie avec un contenu de flux régulier avec une largeur de 100%, de sorte qu'elle s'adapte automatiquement à la largeur du conteneur parent. Cependant, vous voulez que la hauteur ne dépasse pas 450px, ce qui correspond à la largeur de l'image de 1200px; définissez donc la largeur maximale de l'image sur 1200px. Vous pouvez garder l'image centrée en utilisant display: block et margin: 0 auto.

Le texte est peint sur l'image à l'aide du positionnement absolu. Dans le cas le plus simple, j'étire l'élément h1 pour qu'il occupe toute la largeur du parent et utilise text-align: centerpour centrer le texte. Utilisez les décalages supérieurs ou inférieurs pour placer le texte là où il est nécessaire.

Si les proportions de vos images de bannière vont varier, vous devrez ajuster la valeur de largeur maximale pour .bg-image img de manière dynamique à l'aide de jQuery/Javascript. Sinon, cette approche a beaucoup à offrir.

Voir la démo sur: http://jsfiddle.net/audetwebdesign/EGgaN/

14
Marc Audet

Lorsque vous utilisez background-size: cover, l’image d’arrière-plan s’étire automatiquement pour couvrir l’ensemble du conteneur. Le rapport d'aspect est maintenu, cependant, vous perdrez toujours une partie de l'image, à moins que le rapport d'aspect de l'image et l'élément auquel elle est appliquée soient identiques.

Je vois deux façons de résoudre ce problème: 

  • Faites ne conservez pas le rapport hauteur-largeur de l'image en définissant background-size: 100% 100%. Cela couvrira également l'image du conteneur entier , Mais le rapport ne sera pas conservé. Inconvénientest que cela déforme votre image, et peut donc sembler très étrange, En fonction de l'image. Avec l’image que vous utilisez dans le violon, je pense que vous pourriez vous en sortir.

  • Vous pouvez également calculer et définir la hauteur de l’élément avec javascript}, en fonction de sa largeur, afin que son rapport soit identique à celui de l’image. Ce calcul devrait être fait en charge et en redimensionnement. Cela devrait être assez simple avec quelques lignes de code (n'hésitez pas à demander si vous voulez un exemple ). L’inconvénient de cette méthode est que votre largeur peut devenir très petite (sur les appareils mobiles) et que, par conséquent, la hauteur calculée Peut également entraîner un débordement du contenu du conteneur. Ce problème peut être résolu en modifiant la taille du contenu ou quelque chose de nouveau, mais cela ajoute une certaine complexité à la solution.

7
Pevara

J'ai aussi essayé ce style pour le fond d'applications hybrides ioniques. c'est aussi avoir du style pour l'effet de flou d'arrière-plan.

.bg-image {
   position: absolute;
   background: url(../img/bglogin.jpg) no-repeat;
   height: 100%;
   width: 100%;
   background-size: cover;
   bottom: 0px;
   margin: 0 auto;
   background-position: 50%;


  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);

}

0
Code Spy