I'd like to make my CSS3 background gradient fixed. Any suggestions?
1
-
1What do you mean by "fixed"?– BenVCommented Oct 27, 2010 at 15:12
Add a comment
|
4 Answers
An alternative that does not require image files is to use a div layer to hold the gradient you want. Make the div flood the screen by setting width and height to 100%, and fix it by using position: fixed. Important: put this div before all of your content (like right after <body>) or alternatively use z-index to make sure the div doesn't obscure your content.
div.fixedBackgroundGradient{
//ALL YOUR BACKGROUND GRADIENTS
height: 100%; width: 100%;
position: fixed; top: 0px; left: 0px;
}
Hope this works.
A way I have done it in the past was, within your css file set your background color to a solid color (example, #FFF). Create an gradient image that fades from red (top) to white (bottom), with a width of 8px and a height of 800px. Go back to your css file and add a background image attribute and point it to the gradient image you just created and set it to repeat horizontally.
Now if someone has a screen resolution greater than 800 it will not matter because the white bottom of the image will fade in perfectly with the white background color you set.
-
After reading everyone's suggestions it seems like no one understands what "fixed" means. I suppose there is no way to do it via CSS3 alone. Your trick is the next best thing though. Commented Nov 2, 2010 at 14:02
Well, using CSS3 gradients you know that it will not work on IE at all. For IE you can use proprietary filters. But I'm supposing you are over this technical limitation, and really want to learn about truly CSS3 gradients.
And by fixed I understand you want it to be the same gradient, independent of screen width and/or height. Let's say, it starts at 10px, and go to 500px.
To achieve this effect, you should use the color-stops on the gradients.
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/
Have fun.
I think you should just google for "CSS gradients". There are a lot of examples. Here I found a site, which explains well, how to use it.
