CSS Filter: I am trying to create a cross-browser gradient background
using only CSS. Is this possible?
I am trying to create a cross-browser gradient background for a website I am making. Not for a button or header or some other element of the site, but for the entire background of the page. I am looking to make it go from dark brown at the bottom to a lighter shade of brown at the top.
There are many websites out there that produce "cross-browser gradient backgrounds" but unfortunately they all seem to suffer from the same bug when utilized for the background of an entire page. The bug is this: the gradient is (apparently) only applied to the initial size of the browser viewport. In other words, if your browser window is set at a size smaller than the page and you need to scroll down, everything "below the fold" has reverted to the startcolor of the gradient which, as you might imagine, is both visually ugly & interruptive.
Re-sizing the window manually works fine - the gradient remains applied to the entirety of the viewport. Scrolling seem to be the main issue.
So, does anyone know a fix for this? Or perhaps know of a site that achieves this? Or am I just missing something that's right in front of my face?
Here are the websites I've already checked out. They are all great, but none generate code that solves the problem described above.
- Damian Galarza
- Remy Korrelboom
- Display Inline
- Web Designer Wall
- Pure Mango
- CSS Tricks
(If you would like to see the website in question, I've put a link to it in my profile, right at the top.)