Using CSS, can you apply a gradient mask to fade to the background over text?

Question

I have a full screen fixed background image. I would like the text in my scrolling div to fade out at the top, presumably by applying a gradient mask to the background at on

Answer 1

If you're fading to a solid color, you can use a psudo element:

.image-container {
    position: relative;
    display: inline-block;
  }

.image-container:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 55%;
  bottom: 0;
  background: -webkit-linear-gradient(transparent, #FFF) left repeat;
  background: linear-gradient(transparent, #FFF) left repeat; 
}