background-image: linear-gradient(0deg, rgba() 0%, ... , rgba() 100% );
https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
http://www.colorzilla.com/gradient-editor/ May help*
I don't know why the page title isn't really set to work with images you can target that and add something to stand out against.
.pagename { background-color: rgba(255,255,255,0.4); }
If you're looking to add a gradient overlay:
#header::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; /Fades in left to right~/ background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /cause reddit.../ z-index: -1; }