Hero Image - Ich weiß nicht, wie man das artikuliert

Was ich versuche zu tun, ist das Hintergrundbild füllen Sie die gesamte Seite, aber mit der Fähigkeit, nach unten scrollen und nicht das Bild für immer weitergehen. Wenn ich das Bild zu einer div-Hintergrund-Größe hinzufügen Dosis nicht funktionieren, muss ich eine Höhe und Breite hinzufügen, die Dosis nicht ideal erscheinen.Hero Image - Ich weiß nicht, wie man das artikuliert

body { 
 
\t background-image: url("http://cdn.wallpapersafari.com/66/90/zq7i3T.jpg"); 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat; 
 
\t background-attachment: fixed; 
 
} 
 
h1 { 
 
\t color: white; 
 
\t font-size: 50px; 
 
\t text-align: center; 
 
\t position: relative; 
 
\t top: 2000px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Luke Hayes</title> 
 
</head> 
 
<body> 
 
    <div class="hero"> 
 
\t <h1>Some testing text</h1> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2016-10-11 Luke Hayes

Bitte geben jsfiddle. Damit ich verstehen kann was willst du? –

Hintergrundgröße: 100% 100%; – pol

@Raziasultana https://jsfiddle.net/4ujx31aa/ Ich legte die H1 ein paar tausend Pixel nach unten, um zu zeigen, was ich meine, indem das Hintergrundbild für immer weitergeht. –

gelten für den Held div den Körper Stil, und es das Ansichtsfenster machen füllen (Höhe: 100vh)

 .hero { 
 
     height: 100vh; 
 
     background-image: url("http://cdn.wallpapersafari.com/66/90/zq7i3T.jpg"); 
 
     background-size: cover; 
 
     background-repeat: no-repeat; 
 
     background-attachment: fixed; 
 
     } 
 

 
     h1 { 
 
     color: white; 
 
     font-size: 50px; 
 
     text-align: center; 
 
     position: relative; 
 
     top: 2000px; 
 
     }

<body> 
 
    <div class="hero"> 
 
<h1>Some testing text</h1> 
 
    </div> 
 
    </body>

Quelle

2016-10-11 04:08:03 genestd

Das ist viel nah an dem, was ich für, bin ich mit einem ~ 50px Lücke an der Spitze, obwohl auch nach CSS zurückgesetzt https://jsfiddle.net/20dgbyb0/ Ich habe gerade das neulich und tat es nicht Ich brauche Höhe und habe, was ich wollte, es ist komisch. Vielen Dank für einen Blick auf es :) –

@LukeHayes die Lücke wird durch die H1-Margen verursacht, entfernen Sie sie nur mit 'Margin: 0' und Sie werden die Lücke nicht mehr sehen – Signo

Hero Image - Ich weiß nicht, wie man das artikuliert

Antwort

Verwandte Themen