Mehr Inhalt nach background-image

Sorry, wenn meine Frage nicht am besten formuliert ist. Ich beschäftige mich immer noch mit CSS und HTML und lerne die korrekte Terminologie. Wie auch immer, ich erstelle eine Homepage für mein Portfolio und zentriere den Text über meinem Bild auf der Homepage. Ich habe ein Div und ein Hintergrundbild für das CSS erstellt. Innerhalb des div habe ich Text und einen Scroll-Pfeil nach unten hinzugefügt.Mehr Inhalt nach background-image

Jetzt möchte ich den nächsten Teil meiner Website, aber mit einem weißen Hintergrund, nicht das Bild erstellen. Was soll ich machen? Ich habe ein Div für meine zweite Seite erstellt und wenn ich Elemente hinzufüge, erscheint der gleiche Hintergrund. Vielen Dank.

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.back { 
 
    background-image: url(http://i.imgur.com/9WgJg0G.gif); 
 
    background-size: cover; 
 
    position: fixed; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    z-index: 1; 
 
} 
 

 
.text { 
 
    display: flex; 
 
    justify-content: center; 
 
    padding-top: 37vh; 
 
    font-size: 8vh; 
 
    z-index: 9999; 
 
    color: #f39dbc; 
 
    text-shadow: 6px 6px #8ccddb; 
 
} 
 

 
.pageone { 
 
    font-family: 'Oswald', sans-serif; 
 
    letter-spacing: .75vh; 
 
} 
 

 
.scroll { 
 
    display: flex; 
 
    justify-content: center; 
 
    vertical-align: middle; 
 
    padding-top: 27vh; 
 
}

<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="pageone"> 
 
    <div class="back"> 
 
     <div class="text"> 
 
     <h1>1080</h1> 
 
     </div> 
 

 
     <div class="scroll"> 
 
     <img src="scrolldown.png" alt="" id="scroll" /> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="pagetwo"> 
 

 
    </div> 
 
</body>

Quelle

2017-08-16 Kuebiko

entfernen Sie einfach 'Position: fixed' von' .back'? –

Ihre .pagetwo div hat nichts drin und keine Stile - Ich habe eine Höhe hinzugefügt, und zusätzlich position: fixed aus dem .back Elemente entfernt (die das Element mit dem festen machten Ansichtsfenster beim Scrollen).

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 

 
.back { 
 
    background-image: url(http://i.imgur.com/9WgJg0G.gif); 
 
    background-size: cover; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    z-index: 1; 
 
} 
 

 
.text { 
 
    display: flex; 
 
    justify-content: center; 
 
    padding-top: 37vh; 
 
    font-size: 8vh; 
 
    z-index: 9999; 
 
    color: #f39dbc; 
 
    text-shadow: 6px 6px #8ccddb; 
 
} 
 

 
.pageone { 
 
    font-family: 'Oswald', sans-serif; 
 
    letter-spacing: .75vh; 
 
} 
 

 
.scroll { 
 
    display: flex; 
 
    justify-content: center; 
 
    vertical-align: middle; 
 
    padding-top: 27vh; 
 
} 
 

 
.pagetwo { 
 
    height: 100vh; 
 
}

<head> 
 
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed" rel="stylesheet"> 
 
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <div class="pageone"> 
 
    <div class="back"> 
 
     <div class="text"> 
 
     <h1>1080</h1> 
 
     </div> 
 

 
     <div class="scroll"> 
 
     <img src="scrolldown.png" alt="" id="scroll" /> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
    <div class="pagetwo"> 
 

 
    </div> 
 
</body>

Quelle

2017-08-16 21:13:39

Danke, kann nicht glauben, dass ich das verpasst habe. Ich habe diese Position vergessen: behoben. Ich wollte Hintergrund-Anhang haben: behoben. Um einen Parallaxeffekt zu erzeugen – Kuebiko

Mehr Inhalt nach background-image

Antwort

Verwandte Themen