smoothing background images (Full Version)

All Forums >> [Web Design] >> Web Graphics



Message

rdouglass -> smoothing background images (1/11/2008 9:44:20)

Hi Folks,

I have a big circle I'm using as a background image for a web page here:

http://rdouglass.is-a-geek.com/detail4.aspx?CompanyID=167

I would like it (the background circle) to be smoother than it is now. However, I don't think it's as simple as it sounds because the circle needs to remain white always and the background grey will change based on the style sheet being loaded.

The background image is just a GIF file with the white circle and the rest being transparent. So I didn't see this solution as just adding some transitional color pixels since the background could change.

I'm considering using vector graphics on an absolute positioned div with a very low z index but I've never done it before and it sounds like it would be full of IE conditionals. [:'(]

Anyone have any ideas how I could easily make the circle smoother?



jaybee -> RE: smoothing background images (1/11/2008 10:27:47)

The only way I can see it is to put a grey shadow round the edge of the circle. I can't see how vector and z-index would work. The other option is to have a different background for each page with your changing colour then apply using internal styles or a different stylesheet.

What did you use to build that BTW? There is a huge pile of styles in the sheet above what you've added and there are over 200 HTML errors, probably because you have an XHTML Doctype.



rdouglass -> RE: smoothing background images (1/11/2008 10:31:24)

quote:

There is a huge pile of styles in the sheet above what you've added and there are over 200 HTML errors


Yes, still very early in the development I'm afraid. The stylesheet was from an earlier version of a still-live page that will be pared down immensely once I've completed the page (it's a re-work from an existing page and about 90% of that stylesheet is moot).

I also do a lot of inline styles while I'm working out the bugs.

It's mostly done in notepad with some Visual Studio stuff thrown in.



rdouglass -> RE: smoothing background images (1/11/2008 10:39:09)

quote:

I can't see how vector and z-index would work.


I had a thought of putting a vector graphic in a container with a 1 z-index and putting another container with the content on top of it. Positioned of course.

Again, it just sounded like a mess to me trying to make it work well cross browser.

I did think about different BG's for different styles but I was hoping to not have to go that route. [:(]

Thanks.



d a v e -> RE: smoothing background images (1/11/2008 11:36:55)

how many different colours might the circle be?

if they're within a certain range of contrast between it and the circle you might get away with a small amount of antialiasing against the average darkness/lightness and then

you could make a circle anti-aliasing at say 400%, export it/save as a lossless bmp (bmp, tit, png 24)

then open that and resize to 1/4 thus reducing the anti-alias effect to a small amount but still smoothing the circle edge

otherwise do it all the other way round: have a white background set on that middle bit and a background image (with higher z index as a grey curve or whatever colour in your stylesheet and then it will always be perfectly antialiased.

i would try for the first option as it's easier, thought that sort of curve is never going to look really smooth ;)

or png with alpha transparency with the IE workaround hack thingy??

... or do a different design ;)

or , hang on, make a bg image with a white circle punched out of it and wide enough to accommodate anything but a cinema screen and use it as a fixed background on the <body> as a gif it shouldn't be too big and you can make several different colour ones to reference in the stylesheet



rdouglass -> RE: smoothing background images (1/11/2008 11:47:23)

quote:

if they're within a certain range of contrast between it and the circle you might get away with a small amount of antialiasing against the average darkness/lightness


I think that may be the key. Require all background colors to be dark grey. [:D] Joking aside, if I restrict the BG to be dark colors in general, I may be able to get away with that.

Thanks for the input.



d a v e -> RE: smoothing background images (1/11/2008 11:52:50)

or try this as a page background and then just swap the images see attached
only 10k and 2500px wide




might be a bit wide
[image]local://upfiles/5827/D94044ADE07E4C93AA52FE9663C547B3.gif[/image]



Tailslide -> RE: smoothing background images (1/11/2008 12:27:57)

Yeah just smoothed images but different ones for different pages.



rdouglass -> RE: smoothing background images (1/11/2008 15:34:43)

Thanks much dave. I took your image and tried a few BG colors and that one will work great with some slight mods along the way.



Page: [1]

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.046875