Gradient style background?

  • Thread starter Thread starter Solid Fro
  • 8 comments
  • 635 views
Solid Fro

Solid Fro

I told you so.
Premium
Messages
7,889
Messages
SolidFro
Messages
RRoDzaaah!
I'm not sure how to go about this. I want to create a background similar to macromedia.com. I would use a small .gif and set it as the background like this:

Code: 
body {
background-image: url(images/background.gif);
}
The problem is that the .gif is only 500px in height, what if I needed a page longer than 500px? I can't have dozens of background.gifs for each page that needs a different size.

I tried to use a div and set it as the bottom color of the .gif and expanded it as I needed it.

help.gif


This seems like a band-aid fix and would probably clutter up my code. Any suggestions how I would go about this? Macromedia can do it, maybe it's some flashy Flash trick.
 
Ahh... I think I know what you're trying to do... You basically need to define the background color that the gif fades into using CSS something like this:

Code: 
body {
background: #001e56 url("../images/bg.jpg") repeat-x;
}

That's the exact code from my website too. Feel free to use it. Sage helped me out with that one. One of these days I will redesign my site again...
 
No problem. I'm currently working on a university project (through coursework) that will eventually become a finalized website that uses JSP. Eventually, I'll write some of the JSP involved in it. I've designed a navigation menu for it that may be used and is less than 90kb in size and uses CSS to position everything. I'd love to see that used in the final build of the site.
 
Viper Zero
The problem is that the .gif is only 500px in height
Click to expand...
Actually with the repeat method, You only need an image 1 pixel high. Save a little bw for us still on dial up. :yuck:
 
You mean 1px in width (which I'm assuming VZ did). It's physically impossible to create a vertical gradient one pixel high.
 
That would depend on the orientation of the gradient.

I love stating the obvious.
 

Latest Posts

Back