Tell me more ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.
up vote 0 down vote favorite

I'd like to make my CSS3 background gradient fixed. Any suggestions?

share|improve this question
1  
What do you mean by "fixed"? – BenV Oct 27 '10 at 15:12

4 Answers

up vote 0 down vote accepted

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.

share|improve this answer
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. – CorySimmons Nov 2 '10 at 14:02
up vote 1 down vote

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.

share|improve this answer
up vote 0 down vote

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/

http://gradients.glrzad.com/

Have fun.

share|improve this answer
up vote 0 down vote

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.