As a design decision, fading out a background image on page scroll makes a lot of sense: it utilizes a full-screen illustrative web design trend, with no loss of legibility.

Because CSS can’t directly respond to the position of the scrollbar, we need to use a little JavaScript to read an element’s scroll state. The technique I’m about to demonstrate will also use some CSS to create a fade effect for the background, dynamically updated with JavaScript.

A Quick Hack For the Lack of background-opacity

Unfortunately there is, as yet, no background-opacity property in CSS. However, it is possible to recreate the effect by using CSS’s multiple backgrounds feature: placing the image as one layer, the second being a “wash” of color using a linear gradient with an alpha component. So the CSS code for the element (sans vendor prefixes) becomes:

body {
	background: linear-gradient(rgba(255, 255, 255, 0), 
		rgba(255, 255, 255, 0)), url(times-square-perspective.jpg);
	background-repeat: no-repeat;
	background-attachment: fixed !important;
	background-size: 100% !important;
	background-position: center top !important;
	padding: 1rem;
	padding-top: 45%;
	color: #fff;
}

The gradient (which, because it is defined first, will layer on top of the image) is currently invisible, due to the 0 component for alpha at the end of each color stop. !important is used to ensure that the CSS settings are not written over by the JavaScript we will apply in a moment.

Our HTML consists of the following:

<h1>New York Stories</h1>
	<p>In my younger and more vulnerable years…

Finally, we want to place the h1 element on top:

h1 {
	text-shadow: 0 0 5px rgba(0,0,0,0.5);
	font-size: 4rem; color: #fff;
	line-height: 1; position: absolute;
	top: 10px;
}

In order for the paragraph to be read it as the page is scrolled upwards, we need to incrementally bring the gradient to solid white, fading out the background image.

Modifying CSS Gradients With JavaScript

Adding the following script to the bottom of the page:

var nystories = document.querySelector("p").offsetTop;
window.onscroll = function() {
  if (window.pageYOffset > 0) {
	var opac = window.pageYOffset / nystories;
	document.body.style.background = "linear-gradient(rgba(255, 255, 255, " + opac + "), 
		rgba(255, 255, 255, " + opac + ")), 
		url(times-square-perspective.jpg) no-repeat";
	}
}

In this case, nystories is the position of the first paragraph in the page. When the user starts to scroll, the script creates a variable named opac) that divides the current position of the window by the initial position of the first paragraph. The value of this calculation is concatenated to the rgb vales in the gradient color stops as the alpha component, giving the effect of fading out the background image as the browser is scrolled vertically.

There are many other possible behaviours you can create on page scroll, many of which are covered in the associated reasing list on this site.

Photograph by Damianos Chronakis, used under a Creative Commons Attribution-ShareAlike 2.0 Generic license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/RRwryd