Volle Breite Background Image - Stiftung

Möchte ich erreichen, teilen Sie meine web-Seite haben Sie einen hintergrund, der sich verbreitet, die voll mit der Seite kein weißer Leerraum an den Rändern. Ist das möglich? Im mit foundation 5 framework.

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;
}
mögliche Duplikate von Stretch hintergrund Bild css?
JSfiddle bitte

InformationsquelleAutor user3087394 | 2014-05-23

  1. 5

    Gibt es zwei Möglichkeiten, wie Sie dies tun können.

    Können Sie geben #wrapper einer Breite von 100% oder ändern Sie Ihre HTML zu:

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

    Als div ist ein block-element, es wird width:100% als Standard. Solange es nicht in eine bereits bestehende .row Klasse, es wird 100%.

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

    InformationsquelleAutor APAD1

  3. -1

    Können Sie die background-size-Eigenschaft, um die grösse der hintergrund. in Ihrer situation, die Sie wollen, dass es zur Abdeckung des gesamten Bildschirms

    Versuchen Sie den folgenden code:

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

    InformationsquelleAutor Harry

Schreibe einen Kommentar