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.

10% popularity Vote Up Vote Down

@Lee4591628

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.
net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/ gradients.glrzad.com/
Have fun.

10% popularity Vote Up Vote Down

@Correia994

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.

10% popularity Vote Up Vote Down

@Hamaas447

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.

10% popularity Vote Up Vote Down

Feed

: CSS3 Background Gradient Fixed I'd like to make my CSS3 background gradient fixed. Any suggestions?

More posts by @Steve110

: A CMS of some sort really is a must nowadays in most cases. Making money off updating clients' sites may have been a business model in 1998, but isn't any more really. At the end of the

: Screen resolutions and browser canvas sizes I've yet to find the ultimate resource that lists 'all' browsers and the actual visible canvas size (excludes browser chrome) for content. The closest

: Should I worry about people disabling Javascript? Often when picking new tools and frameworks I see the warning "Will not work if the user has disabled Javascript". I then look at my Javascript

: You can take a look at my home page, I did it up very mid-90s. Use old style HRs footers with last updateds are good, that gray background browsers used to have by default. Old style browser

Login to post a comment!

4 Comments

Back to top | Use Dark Theme