4

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>
Jonathan Parker
  • 6,705
  • 3
  • 43
  • 54
  • 1
    Where is the question? Ah I think I've got it: How to not fade the text? Well instead of using pseudo elements, you can set multiple background-images on the same element. – Kaiido Dec 29 '17 at 07:01
  • @Kaiido Oh, I didn't see your comment until after I had posted my answer. Didn't mean to rain on your parade. – Mr Lister Dec 29 '17 at 07:06

1 Answers1

10

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>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • 1
    Why "*In modern browsers*"? Is there really a browser that did support pseudo-elements without supporting multiple bg-images? Ps: might be beneficial to show how sub-properties can be set too, e.g background-positions were different in OP. – Kaiido Dec 29 '17 at 07:06
  • Thanks, I didn't realise you could combine a gradient with an image. – Jonathan Parker Dec 29 '17 at 07:10
  • 1
    @Kaiido Yes, but apparently multiple backgrounds have been around longer than I thought. FF 3.5 didn't have them; neither did IE 8, Opera 10 etc. So you're right, that's neglectable. – Mr Lister Dec 29 '17 at 07:11
  • @JonathanParker To all intents and purposes, a linear-gradient _IS_ an image, except that it doesn't have intrinsic dimensions. – Mr Lister Dec 29 '17 at 07:12
  • @MrLister Yes, I guess I knew, what I really meant was I didn't know you could have mutliple backgrounds. Thanks for your help. – Jonathan Parker Dec 29 '17 at 07:18