Alternate Fixed & Scroll Backgrounds

without js

by Евгений

HTML

<main>
	<div class="cd-fixed-bg cd-bg-1">
		<h1><!-- title goes here --></h1>
	</div>

	<div class="cd-scrolling-bg cd-color-2">
		<div class="cd-container">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
			</p>
		</div>
	</div>
  <div class="cd-fixed-bg cd-bg-2">
		<h1><!-- title goes here --></h1>
	</div>

	<div class="cd-scrolling-bg cd-color-2">
		<div class="cd-container">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
			</p>
		</div>
	</div>
  <div class="cd-fixed-bg cd-bg-3">
		<h1><!-- title goes here --></h1>
	</div>

	<div class="cd-scrolling-bg cd-color-2">
		<div class="cd-container">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
			</p>
		</div>
	</div>
  <div class="cd-fixed-bg cd-bg-4">
		<h1><!-- title goes here --></h1>
	</div>

	<div class="cd-scrolling-bg cd-color-2">
		<div...

CSS

body, html, main {
	/* important */
	height: 100%;
}

.cd-fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

.cd-fixed-bg.cd-bg-1 {
  background-image: url("https://loremflickr.com/640/360");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("https://placekitten.com/640/360");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("https://baconmockup.com/640/360");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("https://placebeard.it/640x360");
}

.cd-scrolling-bg {
	min-height: 100%;
}