[thelist] css "transparency"

Cymbala, Greg Greg.Cymbala at Den.Galileo.com
Tue Sep 24 17:15:01 CDT 2002


Close.

The lion image is the background image of the <body> tag, set to not repeat
and stay "fixed" in the top-left corner:

body	{
      ...
	background : #fff url(../images/lion_lightblue.gif) no-repeat fixed
top left;
	}

(It's at http://www.nypl.org/styleguide/images/contentfill.gif -- you
probably won't see it, but it's there.)

Then there's a div on the page:

<div class="content">...</div>

That holds all the text on the page.

The style definition for the content class specifies a background-image:

.content {
    padding: 10px 20px;
    margin: 5% 15%;
    border: 1px dotted #333;
    background-image: url(../images/contentfill.gif);
}

It's actually a relatively small image and could be even smaller.  But, I
think that the default behavior is to tile background-images, so it gets
repeated (tiled) however big the DIV is.  The image consists of a pattern
like this:

X X X X X
 X X X X
X X X X X
 X X X X

(Sorry, can't think of a name for that pattern.)  Every space above would be
a white picel, while every X would be a pixel with 100% transparency, or
vice versa -- doesn't matter.  (100% or 0% transparent is all the
transparency options you have in GIF format.)

This basically emulates a DIV with a white background that's 50%
transparent.  The human eye just can't tell that there are little tiny
alternating dots there.

HTH,
Greg

-----Original Message-----
From: Paul Bennett [mailto:paul at teltest.com]
Sent: Tuesday, September 24, 2002 4:00 PM
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.

?


The information in this electronic mail message is sender's business
Confidential and may be legally privileged.  It is intended solely for the
addressee(s).  Access to this Internet electronic mail message by anyone
else is unauthorized.  If you are not the intended recipient, any
disclosure, copying, distribution or any action taken or omitted to be taken
in reliance on it is prohibited and may be unlawful.
The sender believes that this E-mail and any attachments were free of any
virus, worm, Trojan horse, and/or malicious code when sent. This message and
its attachments could have been infected during  transmission. By reading
the message and opening any attachments, the recipient accepts full
responsibility for taking protective and remedial action about viruses and
other defects. Galileo International is not liable for any loss or damage
arising in any way from this message or its attachments.





More information about the thelist mailing list