Overlay gradient not working
Trying to understand why this isn't working.. i want the gradient to go below the parent DIV and blend into my page https://jsfiddle.net/fsp1omb5/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
3 Replies
I'm not sure I understand 100% what you want, but in .grad{} adding top: 0 will get rid of the white bar on the picture. If you want the full page to have the gradient (not the image), then move the div.grad outside of the div.container and add a negative z-index in the .grad{} style.
Sorry, I've changed the code. I'll have a menu at the top. I just want gradient overlay on top of the image which goes below the image and transitions from being mostly transparent into being transparent
Just to make sure I understand, do you want the image to fade into the background? Or do you want the gradient overlay on top of the image, but going out beyond the image itself, and having it fade out?