css Vollbild Hintergrund Ausgabe

Question

Meine Webseite hat 4 Hintergrundbilder, jeder von ihnen muss ein Vollbild sein. Auf jedem Hintergrund habe ich ein paar Etiketten und Texte. Hier ist der CSS-Code, ich werde das Problem nach dem Code-Abschnitt ansprechen.

html{ 
    height:100%; 
} 

body{ 
    font-family:'Roboto', sans-serif; 
     color:#fff; 
    -webkit-font-smoothing:antialiased; 
    -moz-osx-font-smoothing:grayscale; 
    height:100%; 
} 

.section{ 
    background-attachment:inherit; 
    background: no-repeat center center fixed; 
    height:100%; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size:cover; 
} 

Mit diesem Stil. Alle Hintergrundbilder können den ganzen Bildschirm einnehmen. Wenn ich jedoch das Browserfenster auf eine kleine Höhe skaliere, beginnt meine Beschriftung $ text auf Hintergrund 1 über Hintergrund 1 und Hintergrund 2. Wenn ich die "Höhe: 100%" oder "min-height: 100%" lösche stattdessen. Jedes Hintergrundbild wird nie zum Vollbildmodus, aber ich bekomme meine Beschriftungen & nicht über zwei aufeinanderfolgende Hintergrundbilder, wenn ich das Browserfenster auf eine kleinere Höhe verkleinere. Bitte helfen Sie

Hier ist mein HTML für die ersten beiden Bildhintergrund. Ich brauche jeden Bildhintergrund, um auf jedem Gerät den ganzen Bildschirm zu betrachten, wobei meine Textfelder auf jedem Hintergrund gut aussehen. Hier mein Problem ist, wenn ich die Höhe des Browsers schrumpfen, werden einige Text (abgedeckt durch den nächsten Hintergrund) verschwinden aufgrund der Höhe des Textfeldes> Höhe des Browser

<!-- Page Top Section --> 
<div id="page-top" class="section" data-background-image="/images/background/page-top.jpg" style='background-image: url("/images/background/page-top.jpg");'> 
    <div class="pattern height-resize"> 
     <div class="container"> 
      <h1 class="site-title"> 
       hello I am site title 
      </h1><!-- /.site-title --> 
      <h2 class="section-title"> 
       hello I am section-1 
      </h2> 

      <div class="next-section"> 
       <a class="go-to-about"><span></span></a> 
      </div><!-- /.next-section --> 

     </div><!-- /.container --> 
    </div><!-- /.pattern -->   
</div><!-- /#page-top --> 
<!-- Page Top Section End --> 


<!-- About Us Section --> 
<section id="about" class="section" data-background-image="/images/background/about-us.jpg" style='background-image: url("/images/background/about-us.jpg");'> 
    <div class="pattern height-resize"> 
     <div class="container"> 
      <h3 class="section-name"> 
       <span> 
        SECTION NAME 
       </span> 
      </h3><!-- /.section-name --> 
      <h2 class="section-title"> 
       SECTION TITLE 
      </h2><!-- /.Section-title --> 
      <p class="section-description"> 
       FJDKLASJLKFJASDKLJFLKSJFLKDJSAKLFJDLKSAJ 
      </p><!-- /.section-description --> 

      <div class="next-section"> 
       <a class="go-to-subscribe"><span></span></a> 
      </div><!-- /.next-section --> 

     </div><!-- /.container --> 
    </div><!-- /.pattern --> 


</section><!-- /#about --> 
<!-- About Us Section End --> 

Abschnitt Titel css: . Abschnittstitel { text-align: center; Text-Transformation: Großbuchstaben; Schriftgewicht: 300; Schriftgröße: 80px; }

Answer 1

Wenn Sie vier divs mit 100% Bildschirmgröße in Breite und Höhe mit unterschiedlichen Hintergründen wollen, die in einem beliebigen HTML akzeptieren können und werden alle Bildschirmgrößen passen, gibt es traditionelle Art und Weise, dies zu tun:

Vorschau: http://codepen.io/kunokdev/pen/LRPPdO

HTML:

<section> 
    <div>Any HTML inside a first div w/ background</div> 
    <div>Any HTML inside a second div w/ background</div> 
    <div>Third is here too!</div> 
    <div> 
    <h1>Forth</h1> 
    <p>Forth has even more than that!</p> 
    </div> 
</section> 

CSS:

html, body { 
    height: 100%; 
} 
section { 
    height: 100%; 
} 
div { 
    height: 100%; 
    background-size: cover; 
} 
div:nth-child(1){ 
    background-image: url(http://i.imgur.com/BMaWw5C.jpg); 
} 
div:nth-child(2){ 
    background-image: url('http://i.imgur.com/sznCGw4.jpg'); 
} 
div:nth-child(3){ 
    background-image: url(http://i.imgur.com/BMaWw5C.jpg); 
} 
div:nth-child(4){ 
    background-image: url('http://i.imgur.com/sznCGw4.jpg'); 
} 

oder auch mit viewport Einheiten:

HTML:

<div></div> 
<div></div> 
<div></div> 
<div></div> 

CSS:

div { 
    height: 100vh; 
} 

Also ich glaube, Sie brauchen background-size: cover; und vielleicht ein bisschen von background-position Eigenschaft auch. Falls Ihr Inhalt überläuft, sollten Sie overflow: auto verwenden.

Zusätzlich:

Wenn Ihr Ansichtsfenster Höhe und Breite kleiner ist als die html in Containern, betrachten Medienabfragen verwenden.

Zum Beispiel, wenn Ihre Inhalte überlaufen, wenn Höhe 500px Verwendung Abfrage wie

media only screen and (max-width: 500px){ 
    div { 
    height: auto; 
    } 
} 

Betrachten Ansicht mit Mozilla Firefox Responsive Design beim Testen. Ähnliche Funktionen gibt es auch in Chrome.

Dann sind Ihre Inhalte nicht mehr 100% nach Ansichtsfenster max-Breite von 500px, stattdessen werden sie so groß wie Inhalte darin.