La pleine largeur de l'Image d'arrière-plan - Fondation

Que je veux atteindre les parties de ma page web pour avoir une image de fond qui se propage le plein avec de la page, pas d'espace blanc sur les bords. Est-ce possible? Im en utilisant fondation 5 cadre.

html

  <div class="row"  id="wrapper">
    <div class="large-12  columns">
      <div class="kickstart"><img src="img/kick-start.png">
        <p class="getfit"><img src="img/get-fit.png"></p>
        <p class="home-text"> BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. </p>
        <p class="get-contact"><img src="img/get-contact-btn.png"></p>
        </div>
        </div>
      </div>

css

#wrapper {
    background-image: url("../img/home-img.png");
    background-repeat: no-repeat;
    width: 100% !important;
    z-index: 0;


}
.kickstart {

    padding: 30px;
}
.getfit {
    padding-top: 10px;
}

.home-text {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: normal;
    color: black;
}
double possible de Étirement de l'image de fond en css?
JSfiddle veuillez

OriginalL'auteur user3087394 | 2014-05-23

  1. 5

    Il y a deux façons dont vous pouvez faire cette.

    Vous pouvez donner #wrapper une largeur de 100%, ou de modifier votre code HTML:

    <div id="wrapper">
  <div class="row">
    <div class="large-12  columns">
      <div class="kickstart"><img src="img/kick-start.png">
        <p class="getfit"><img src="img/get-fit.png"></p>
        <p class="home-text"> BodyMetrix Personal Training is a new company, based in South London, aiming to bring one-on-one training sessions and personalised exercise and nutrition plans. </p>
        <p class="get-contact"><img src="img/get-contact-btn.png"></p>
      </div>
    </div>
  </div>
</div>

    Comme un div est un élément de bloc, il faudra width:100% en tant que par défaut. Tant qu'il n'est pas dans un déjà existant .row classe, il sera 100%.

    OriginalL'auteur Albzi

  2. 2
    #wrapper {
    background-image: url("../img/home-img.png");
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    width: 100% !important;
    z-index: 0;
}

    OriginalL'auteur APAD1

  3. -1

    Vous pouvez utiliser l'arrière-plan-propriété de la taille pour ajuster la taille de votre arrière-plan. dans votre situation, vous voulez qu'il couvre la totalité de l'écran

    D'essayer le code ci-dessous:

    #wrapper { 
  background: url("../img/home-img.png") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100% !important;
  z-index: 0;
}

    OriginalL'auteur Harry