Getting a gradiant background

joilet

joilet

joilet

Associate
Joined
25 Dec 2002
Posts
1,540
Location
South GLOUCESTER
Hey guys

I would like to use a gradiant background on my website. I want the top to be gold(ish) and fade to black. I am using the CSS property to specify an image which i have created. The image i created is a 1280x1024 GIF of the background.

Heres the problem; it looks good on my computer, but at different resolutions it looks horrible. The image looks like its made up of shaded bars and it looses all its quality.

How do i get around this? I thought about making different resolution images and using ASP to detect the resolution and specifying a different CSS file which would point to different backgrounds.

Do any of you have any tips to doing background gradiants - file formats, format properties, ways to implement it. Would really appreciate some help with this from anyone who has done this before or faced similar problems.

Cheers
 
web only uses 256 colours and a gradiant image made in say photoshop has thousands of colours in, so that may have something to do with it. When making the image if using photoshop, try making it from a 256 colour only image, off top of my head this option is in image->mode or there abouts.
 
i dont know too much about graphics, i struggled in paintshop to make it! I started off with a black background and applied a gradient to the top of it. The image formats comes up as raster i think. I used the export function to create the GIF. I'll give PNG a go as well. Also i will try doing it using only 256 colours.

It would be nice if there was such a format which could generate gradients based on a few parameters. Such as start at X colour and end in Y colour, then it would automatically create the background in the users browser.

If i'm right in thinking GIF doesn't allow over 256 colours, then my browser must be making the best out of the image to make it look seamless.
 
I've been playing around with PNG and i like this format better. I get a big improvement on the size of the image now which is a bonus. On some computers i was still getting the horrible shaded bars up. Then i realised this is down to the 16bit colour setting on the graphics. When i upped this to 24bit, it displayed perfectly.

The site was originally made with a single colour background. I didn't design it, a poor web designer did. It looks many times better with a gradient background as the overall colour i am trying to achive is gold.

The background reacts differently at different resolutions and colour settings. I think i may use ASP to detect the settings and then make it specify different backgrounds, or just use a single colour. That way, depending on the users settings, they get the right resolution background, instead of some oversized 1600 one. Obviously i would put in a failsafe so that if it couldn't detect the conditions, it would default to the single colour.

What do you guys think of this? Can i use ASP in a CSS file? Reason i ask is because i dont want to make a bunch of separate CSS files and would rather use the same one with some ASP to write the correct background property. I have the feeling, someone would just be able to download the entire code including the script.
 
You could specify the body background attribute on the main page in the <style type="text/css"></style> tags, or even in <body style="background: url('blahblah');"> so wouldn't need to mess with external sheets for this purpose.
 
For a vertical gradient background, the optimal method is to use a gradient image of 1 pixel width and say 1024 height. Faster load time with a smaller image.

Add this as a background-image with CSS, and then set it to repeat horizontally i.e. repeat-x from the top-left. Then set the page background to the colour of the bottom of the gradient.

At all resolutions, the gradient will always cover the top of the page up to a height of 1024 pixels and horizontally across the screen. At higher resolutions and longer pages, the gradient will appear to continue vertically past the bottom of image as the background page colour shows.

See www.macromedia.com as an example. The background image they use is: http://assets.macromedia.com/cdn-images/master/background.jpg

And the relevant rule:

Code: 
body
{
background-color: #999;
background-image: url(/images/master/background.jpg);
background-repeat: repeat-x;
background-position: 0 0;
}
 
Augmented said:
For a vertical gradient background, the optimal method is to use a gradient image of 1 pixel width and say 1024 height. Faster load time with a smaller image.

Add this as a background-image with CSS, and then set it to repeat horizontally i.e. repeat-x from the top-left. Then set the page background to the colour of the bottom of the gradient.

At all resolutions, the gradient will always cover the top of the page up to a height of 1024 pixels and horizontally across the screen. At higher resolutions and longer pages, the gradient will appear to continue vertically past the bottom of image as the background page colour shows.

See www.macromedia.com as an example. The background image they use is: http://assets.macromedia.com/cdn-images/master/background.jpg

And the relevant rule:

Code: 
body
{
background-color: #999;
background-image: url(/images/master/background.jpg);
background-repeat: repeat-x;
background-position: 0 0;
}
Click to expand...


Thanks very much for this. This is an excellent way of keeping the filesize down and its at something stupid like 300bytes! I am still using PNG; is this wise? I have read that some browsers do not support this fully. I know GIF is only 256 colour, but it seems to display correctly on my pc, even though the image is 24bit. Maybe it uses a newer standard of GIF, i'm not sure!

For testing purposes, i made an image 1px wide and 800px tall. On my resolution which is 1024px tall, this left a gap at the bottom with the colour specified. I was expecting this and would still like to resolve this if possible. I guess macromedia can get away with a white background fairly easily.

I am tempted to put my css into a .asp file (with correct content headers). Then write some scripts to detect the conditions of the users resolution and possibily the browser. depending on the browser version, it would write a response to the background property specifying different images to use. PNG/GIF depending on the compatibilty. but would also detect the res and depending on its value, choose a different image again. I know this sounds extreme for what i'm trying to do and its a small site anyway.

I'm going to create a massive image and see how the browser responds. maybe it will resize it, maybe it will create scroll bars. who knows! one way to find out.

How would you guys approach this?
 
joilet said:
Thanks very much for this. This is an excellent way of keeping the filesize down and its at something stupid like 300bytes! I am still using PNG; is this wise? I have read that some browsers do not support this fully. I know GIF is only 256 colour, but it seems to display correctly on my pc, even though the image is 24bit. Maybe it uses a newer standard of GIF, i'm not sure!
Click to expand...
PNG provides excellent compression, and I'd definitely recommend sticking with it. You can often squash the filesize down further by running it through an optimiser like OptiPNG or PNGCrush. I believe PNGGauntlet for .NET is supposed to be even better.

The compatability issue is when using alpha-channel transparency in 24/32-bit PNGs. If you're not using alpha transparency, then you needn't be concerned with PNG compatability.

For testing purposes, i made an image 1px wide and 800px tall. On my resolution which is 1024px tall, this left a gap at the bottom with the colour specified. I was expecting this and would still like to resolve this if possible. I guess macromedia can get away with a white background fairly easily.
Click to expand...
Have you specified the same colour for the page background as the colour at the very bottom of the gradient i.e. if the last colour is #22222b, set your page background as #22222b.

/edit - ah, I think I misunderstood. You always want the gradient to span the entire height of the page, regardless of resolution?
A bit tricky as pages can be longer than the current resolution's height, meaning you can't always be sure what height to have the gradient as..

I am tempted to put my css into a .asp file (with correct content headers). Then write some scripts to detect the conditions of the users resolution and possibily the browser. depending on the browser version, it would write a response to the background property specifying different images to use. PNG/GIF depending on the compatibilty. but would also detect the res and depending on its value, choose a different image again. I know this sounds extreme for what i'm trying to do and its a small site anyway.
Click to expand...
That's not such a bad idea. People have been playing about with this idea in PHP.

I'm going to create a massive image and see how the browser responds. maybe it will resize it, maybe it will create scroll bars. who knows! one way to find out.

How would you guys approach this?
Click to expand...
I'd stick with the one image for all resolutions - eases maintainence and bandwidth consumption. A image specified as a CSS background image won't be resized. That only works if you place an image inline (<img src="#" />) and give it relative dimensions e.g. height: 25em, or width: 90%.
 
Last edited:
Your very knowlegable sir! Thanks.

I read something about the PNG and alpha transparency. Luckily i'm not using this. I use paintshop and it has an ok optimiser built in. i dont think its worth trying others just to save on a few bytes of data.

Good idea about the background colour being the same as the last colour on the image. I'm fading from gold(ish) to black so i'll just specify #000000.

My quest to use a different image for each resolution is abit drawn out. It seems ASP server variables can't actually detect the resolution like i previously thought. It can only detect the browser. The only way (that i know of) is to use javascript. This would also detect the colour depth which is important. I can't rely on all my visitors having it enabled so i think i'll give it a miss. It would have been cool to do though! i'll use what you suggested in order to drag the image out using a colour. Its only the extremely high resolutions it would suffer with, but i'm willing to ignore that fact.

The only real issue is the colour depth. a lot of offices are still running on 16bit; most of our computers here run on 16bit as they're quite low spec. I guess there is no way around this unless i actually change the background altogether!

Hmmm, i am tempted to use javascript to detect resolution and colour depth. I can always stick in a failsafe to revert back to a default image, or colour.

What would you do in my situation?

Great help so far, i should have sorted it by the end of today!
 
It's just one of those things you live with. There's not much you can really do. Users on 16-bit displays will probably be used to seeing banding on images.

It might be worth researching some stats on display stats to see if it's worth the bother. This page suggests it's ~17%. Not enough to bother spending time on a solution personally.
 
Last edited:
I have decided to scrap the idea of detecting the resolution and colour depth. I am just going to make a 1x1024 PNG of the gradient i want and make the rest black. It looks ok in 1024x800, 1280x1024 and 1600x1280. I guess i will have to take a gamble on the colour depth. screw them!

Thanks for everyones help, appreciate it!
 
You must log in or register to reply here.
Back
Top Bottom