Несколько цветов фона

Question

Я пытаюсь сделать что-то на этом сайте: http://www.designembraced.com/#/HTC Мне нужно сделать цвет фона, который охватывает весь экран, а затем, когда я прокручиваю вниз, должен быть другой цвет (или изображение).

Я знаю, как это сделать, используя position: fixed;, но потом я не могу прокручивать. Надеюсь, вы понимаете, что я хочу сказать.

Answer 1

Если вы посмотрите на их DOM, они не используют CSS. Они фактически создают разделы с элементом изображения. Это вызовет прокрутку сайта.

<!--HOME--> 
<section id="ascensorFloor1" class="ascensorFloor" style="position: absolute; width: 1920px; height: 969px; left: 0px; top: 0px; overflow-y: auto; overflow-x: hidden;"> 
<div class="titleScreen"> 
<div id="welcome"> 
<img src="IMG/logo.png" alt="Logo" class="logo"> 
<h1 style="font-size: 200px;">EAT</h1><h1 style="font-size: 200px;">DESIGN</h1><h1 style="font-size: 200px;">SLEEP</h1> 
<h2 style="font-size: 15px;">FREELANCE CREATIVE/ART DIRECTOR &amp; DESIGNER - ANTHONY GOODWIN</h2> 
<!--<p>Mentions<br><br> 
<p class="awards"> 
[ 1x FWA Site Of The Month ] - [ 2 FWA Site Of the Days ] - [ 2 FWA Mobile Of The Days ] - [ 1 Cannes Lion Awward (Bronze) ] - [ 1 AWWARDS Site Of The Day ] 
</p--> 
</div> 
</div> 
</section> 

<!--HTC--> 
<section id="ascensorFloor2" class="ascensorFloor" style="position: absolute; width: 1920px; height: 969px; left: 1920px; top: 0px; display: block; overflow-y: auto; overflow-x: hidden;"> 
<div class="coverScreen" style="opacity: 0;"></div> 
<div class="titleScreen"> 
<div class="projectInfo"> 
<h1 style="font-size: 200px;">HTC</h1> 
<h1 style="font-size: 200px;">.COM</h1> 
<h2 style="font-size: 15px;">ART DIRECTION/IDEA/DESIGN</h2> 
<p>An interactive and innovative solution to search for the perfect HTC phone.<br> Choose a phone that suits you by picking features that you use the most.</p> 
<div class="scrollcontainer"><img src="IMG/arrow.png" alt="scroll"></div> 
</div> 
</div> 
<div class="headerImage" style="margin-left: -1280px;"><img src="IMG/htcHeader.jpg" alt="HTC" class="images2"></div> 
<div class="projectImage" style="display: block; margin-left: -1280px;"><img src="IMG/HTC.jpg" alt="HTC" class="images" style="width: 2560px;"></div> 
</section> 


<!--KLM--> 
<section id="ascensorFloor3" class="ascensorFloor" style="position: absolute; width: 1920px; height: 969px; left: 3840px; top: 0px; display: block; overflow-y: auto; overflow-x: hidden;"> 
<div class="coverScreen" style="opacity: 0;"></div> 
<div class="titleScreen"> 
<div class="projectInfo"> 
<h1 style="font-size: 200px;">KLM</h1> 
<h1 style="font-size: 200px;">SPACE</h1> 
<h2 style="font-size: 15px;">DIGITAL IDEA/ART DIRECTION/DESIGN</h2> 
<p>An interactive and emersive promotional campaign for KLM "Claim your place in Space".<br>The project was aimed to get users to sign up and pick a place in space for the chance to win a ticket on the first commercial space trip from Curacao.</p> 
<div class="scrollcontainer"><img src="IMG/arrow.png" alt="scroll"></div> 
</div> 
</div>