Gradient background?

February 9, 2009 3:53 PM

Is there a way to create gradient backgrounds on webpages without using images?

I want something to the effect of this site such that the background is a gradient that extends from top to bottom. The catch is that I run a news blog website and posts sizes can vary significantly in length, so using a set image doesn't quite work out .

I'd really like to avoid using tables to achieve this effect and I really want the gradient effect to extend from top to bottom.

Any ideas?

This is for a Wordpress blog, by the way.

posted by nikkorizz to Computers & Internet (7 answers total)

Without images the best you could do is use javascript to create an SVG document inside your page and have that make a gradient. Browser support isn't great for that though and you'd probably be better off with an image.

What if you made a .png of a gradient that was like 1px * 10000px and resized its height to match your page?
posted by valadil at 4:08 PM on February 9, 2009

I tried making a 1x6000 pixel picture, but it kept freezing my image editor. 5000 was the max it would let me edit. :(
posted by nikkorizz at 4:25 PM on February 9, 2009

Why not create a gradient and then make the page background match one half? I'd guess that's pretty much what's going on on the MSN site.

Or you could create a transparent PNG for the gradient part and just slap it on any color background you like. Then just use a bit of javascript to fix the transparency for IE.
posted by speeb at 4:43 PM on February 9, 2009

There is the evil of the gradient filter (IE only).
posted by Artw at 5:06 PM on February 9, 2009

Some possibilities...
posted by dubitable at 5:08 PM on February 9, 2009

I would suggest a reasonably sized gradient image that fades to the background color of the rest of the page, like speeb says above. Bonus points if your page has enough content to always be longer than the gradient image whithout looking empty. IANA graphic designer, but I think that a gradient that changes with page length would look inconsistent between short and long pages.

If you are going to follow valadil's advice and resize a fixed image, there's no reason for it to be taller than 5000 pixels --- I don't think anyone will be able to tell the difference after a couple of thousand anyway.

I think CSS3 is supposed to provide this kind of thing. so you could also wait for a few years
posted by ghost of a past number at 11:43 PM on February 9, 2009

If the gradient automatically resized to fit pages of any length, a short page will look different from a longer page. It would be inconsistent, and that's usually a bad thing when it comes to design.

It's best to just do what ghost of a past number and speeb say - make it about 500 pixels high, and set the default background color of the page to whatever the color on the bottom is. The background doesn't have to repeat - use background-repeat: repeat-x; and you won't have to make the image so bloody tall.

Here's the image on the msn page for reference:

http://tk2.stc.s-msn.com/br/hp/11/en-us/css/i/bg_blue_2.gif

They made it 1100 pixels high.
posted by kpmcguire at 1:51 AM on February 10, 2009