5 replies [Last post]
becks3636
becks3636's picture
Offline
newbie
Swindon
Last seen: 5 years 33 weeks ago
Swindon
Joined: 2009-02-25
Posts: 7
Points: 0

Hi, Apparently you can create a gradient background which completely fills a background page, only using code and no images. I can't seem to find this on the net anywhere, can anyone help? Also, is it possible to use three colours in the background gradient?

Thanks...

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 4 years 1 week ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

Doing your own Google search

Doing your own Google search on this would probably be more helpful to you honestly.

People have come up with all kinds of ways of doing this.. but I'm fairly certain that a bg image is still the "best" way.

There is the "latency friendly" way of using a table with hundreds of 1px high/wide cells.. each with a different bg color in it... this supposedly loads quickly, and looks good, but is just a horrible method if you ask me due to the code you need to use.

I've read about a CSS method that uses a white to transparent image, that gets placed over a solid background color.

Some people have used PERL or PHP scripts to accomplish things.. usually in conjunction with the table method that I mentioned above as far as I can tell.

There are lots of random methods out there.. I would recommend searching for them yourself though. In my opinion, there's a reason that most people use images to create background gradients.. because it works! "Don't fix it if it ain't broken" if you ask me!

downtap
downtap's picture
Offline
Enthusiast
Dallas, TX
Last seen: 2 years 32 weeks ago
Dallas, TX
Timezone: GMT-5
Joined: 2008-01-18
Posts: 227
Points: 36

To me personally, and maybe

To me personally, and maybe this is the designer in me, but I've tried the no image methods, and they just seem more trouble than they're worth. Maybe I just haven't mastered the proper methodology. I love the control and ease of use I get by using an image, and with proper png compression techniques, you can keep file size to a minimum. Not to mention, most of my gradients seem to not just be color but have some sort of pattern with them. Smile

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 23 weeks 3 days ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2636
Points: 1554

is there am issue to where

is there am issue to where you wouldn't just do a 1px width image? It doesn't get much easier then that. Having hundreds of divs, or table cells is retarded. It will most likely take longer to render then just using an image.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 2 years 9 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

IE aside, you could do it

IE aside, you could do it with SVG.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 4 years 1 week ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

CupidsToejam wrote:is there

CupidsToejam wrote:

is there am issue to where you wouldn't just do a 1px width image? It doesn't get much easier then that. Having hundreds of divs, or table cells is retarded. It will most likely take longer to render then just using an image.

I did a quick Google search after reading the initial post, and found someone who had it done with hundreds of 1px high table cells lol.. which is why I mentioned that one. They were only doing a header background, and it did actually load faster than a header with the same dimensions using an image. God knows how well the image was compressed, or anything like that (didn't read that far into it). We are talking .1 seconds for the image and .02 or something for the table based..

I'm guessing the table method would lag behind for a full screen render.. but who knows. Either way, I personally think that's just an insane way to go about a gradient background.

@ Chris:
I found a link for SVG as well.. I figured it would be easier to let the OP run their own Google search than list out all of the "random methods" that I brought up.

That SVG one looks interesting.. found a forum with some discussion on it. But as you mentioned, there are issues with certain browsers.