CSS background image fade to white

Question

I'm trying to fade in a background image from white without fading the content.

This is what I have:

.my-container {
  position: relative;
  background: white;
  overflow: hidden;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: url('http://placekitten.com/1500/1000');
}


/* You could use :after - it doesn't really matter */

.my-container:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

<div class="my-container">
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>

</div>

Answer 1

The trouble with using a pseudo-element is that you are trying to insert it between the text and the background.

The solution, at least in modern browsers, is to stack multiple backgrounds onto one another in the container itself.

.my-container {
  position: relative;
  background: white;
  overflow: hidden;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), url('http://placekitten.com/1500/1000');
}

<div class="my-container">
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>
  <h1>Scotch Scotch Scotch</h1>

</div>