Posted by doubleeater on October 13, 2009 at 1:08am
Jump to:
| Project: | Marinelli |
| Version: | 6.x-1.4 |
| Component: | Code |
| Category: | task |
| Priority: | normal |
| Assigned: | doubleeater |
| Status: | active |
Issue Summary
I am trying to replace the existing background of Marinelli and apply a blue to white gradient. I've already tried to apply one and it worked but because the gradient was only 800 pixels long, it "restarted" another gradient below 800 pixels. Then I tried to apply a longer gradient but the gradient was too stretched out. I want to apply a relatively compact gradient and then have it stay white after 800 pixels instead of "restarting" in blue. Anyone know how to do this? Thanks.
Comments
#1
Basic CSS
#2
Gee, thanks for the snarky reply. But you must not have read the question carefully. I don't want to repeat the gradient. I want to make it transition from blue into white and have the image stay white instead of starting over from blue again. Anyone else?
#3
The instructions are on that page background-repeat:no-repeat. Although you probably want background-repeat:repeat-x.
I get snarky when people don't even look at the documentation...
#4
Did you understand the quetsion? I went to your link and I don't think you do. The question is how do you make the gradient so that it will stay on the transition color instead of restarting back in the original color? For example, I have a blue to white gradient background. If the uploaded gradient file in the image folder is only 800 pixels tall, then after 800 pixels, it will repeat to the original blue. I want it to stay white after 800 pixels. I used an online gradient creator and most of them only allow 800 pixel in height. By using "repeat-x" (which is what I've been using from the beginning), after the 800 pixels in height, the colors will start over again.
#5
If you use repeat-x correctly, then it will not repeat-y, yet you say it is doing that. Could be you've got the syntax wrong.
Another first-google-page link has an example (scroll down to "css gradient background")
http://www.tizag.com/cssT/background.php
That gives you a gradient that goes across but not down any further than it should. You say the gradient 'restarted' which is the default behaviour unless you use background-repeat.
If you use background-repeat:repeat-x, then anything below the height of the image will be the background color of the element. If the color there is not what you want, then it's a different problem from the one you described.
If you want the non-gradient background to be white, just use background-color to set that too.