[thelist] css "transparency"

Richard McFarland rlmcfarland at attbi.com
Tue Sep 24 19:25:01 CDT 2002


Paul,

Not quite.

There is a background-image in the 'body:' definition that is fixed in
place.

The 'div' that "floats" has its own background-image that is a "transparent"
image. I've used images where every other pixel is transparent, which
creates the sort of "milky" effect seen on your example page.

Because the image on the body background is "fixed" it stays in place in the
browser window even when other elements scroll. You can, of course, set that
image to scroll as well.

Here's a link to an example that's part of a site I'm currently developing
for a restaurant (the site has not actually been publicly published, but
please take a look anyway ;->):

http://home.earthlink.net/~nellsrestaurant/recipes.html

A caveat: Be careful with font sizes for text that you put on top of a
transparent image like these: at smaller sizes, the "holes" in the
background-image can make your text look pretty ragged. Serif fonts seem to
be problematic, too...Where are those pixel-splitting monitors when we need
them?

Richard
 --
Richard McFarland <rlmcfarland at attbi.com>
206-378-6942

> From: Paul Bennett <paul at teltest.com>
> Reply-To: thelist at lists.evolt.org
> Date: Wed, 25 Sep 2002 09:59:59 +1200
> To: thelist at lists.evolt.org
> Subject: Re: [thelist] css "transparency"
>
> Thanks for all the help and links - so just to see if I have this straight:
> The content div actually has no "translucency" (giving the thesaurus a
> hammering today...) but has a seperate bg image to the body. This is
> fixed in positon to sit over the body image but provide a new image
> effect (distortion / translucency etc). As it is set not to scroll, it
> stays static as the content div scrolls and gives the illusion of
> translucency in the content div.
>
> ?
>
> --
> Paul Bennett
> Internet Developer
> Teltest Electronic Design
> --------------------------
> Phone : 64 4 237 0767
> Web : http://www.teltest.com
> Wap : http://wap.teltest.com
> Email : paul at teltest.com
> --------------------------
>
>
>
> --
> For unsubscribe and other options, including
> the Tip Harvester and archive of thelist go to:
> http://lists.evolt.org Workers of the Web, evolt !




More information about the thelist mailing list