IE Filter:Alpha settings on backgrounds...
Richard Mahoney
let's assume I've got a main content <DIV> which is styled with CSS and
contains a small image tiled as the background using the
"background-repeat:repeat;" and "background:attachment" commands. How do I
set the Filter:alpha(Opacity=50) filter to this div, without affecting the
entire content, just the image? IS this possible?
I have knocked up a small hack using z-indexing, 2 copies of everything and
positioning as an example - http://www.the-chaos-engine.20m.com/csstest.html
This is how it should look if the effect I want works...
The problem I seem to be getting, no matter what I try, is that the filter
is applied to the text (whole content div) which kind of defeats the object
of the whole thing...
Thankyou very much in advance,
RM.
gilly3
news:3jux8.33718$DZ2.5...@news6-win.server.ntlworld.com:
> How
> do I set the Filter:alpha(Opacity=50) filter to this div, without
> affecting the entire content, just the image? IS this possible?
It sounds like you are trying to make your image more subdued. Why not
just do that - just change the image file to be more subdued. Or is there
something else you are trying to accomplish with the filter?
-ivan.
Richard Mahoney
"gilly3" <iv...@NOSPAMgilly3.com> wrote in message
news:elWauhH7BHA.2152@tkmsftngp04...
Yeah, I want it to be see-through, like this hack I knocked up with 2
separate <DIV>'s. http://www.the-chaos-engine.20m.com/csstest.html
The problem lies within IE's apparent inability to apply the filter to just
the background and nothing more (the text etc.).
The above example was achieved by using 2 div's, one treated, the other
normal, then layered the normal one on top of the other one using z-index
and absolute positiioning. Obviously, this is a far from ideal solution, in
older browsers they will see a confusing layout with all the text repeated
twice. (And I will have to duplicate everything I write).
A simple solution would be to be able to put the Content DIV (the text and
non-see-through stuff etc..) inside of the Transparent DIV (which will just
contain the affected background and no text) which should stretch the
Transparent DIV (and thus the background image) to the same size as the the
main content.
The bottom line is, how do I prevent the Content DIV from inheriting the CSS
styles from the outer Transparent DIV?
Code example below - (Using inline styles as example)
*(1.)* - Affected DIV containing the transparent background image -
*(2.)* - Content DIV
<div style="background-attachment: url(background.jpg) fixed no-repeat
center; filter:alpha(Opacity=50);"> *(1.)*
<div style="font-family:Arial; font-color:#323296; font-size:80%;">
*(2.)*
<h1>Content Heading</h1>
<p>All the text, all the text, text and other stuff<br />
Other text etc...This will look amazing if this text wasn't suffering from a
filter inherited from the outer div...</p>
</div> *(2.)*
</div> *(1.)*
Hope this makes it clear [or not, as the case maybe :-) ]...
RM.
gilly3
>>
>> It sounds like you are trying to make your image more subdued. Why
>> not just do that - just change the image file to be more subdued. Or
>> is there something else you are trying to accomplish with the filter?
>
> Yeah, I want it to be see-through, like this hack I knocked up with 2
> separate <DIV>'s. http://www.the-chaos-engine.20m.com/csstest.html
>
The problem is that you want to apply the filter to just the image, but
you are actually applying it to the div that contains the image and text.
Applying it to the div applies it to everything in the div. Until there
is a css attribute something like background-filter, you will have to use
two objects: One that has a background image and is filtered, and one
that displays text. That is what you have done on your sample page, but
you don't need to duplicate the text to do what you are trying to do.
Using what you've already got, delete the text from <div id="page">
</div>, and replace your #page selector styles with these styles:
background-image: url(http://www.the-chaos-engine.20m.com/water.gif);
filter: alpha(Opacity=50);
position: absolute;
top: expression(page2.offsetTop);
left: expression(page2.offsetLeft);
height: expression(page2.offsetHeight);
width: expression(page2.offsetWidth);
z-index: -1;
That should do it, and it works on my "older" (ie 5.0 - company standard)
browser.
good luck.
-ivan.
Richard Mahoney
> you are actually applying it to the div that contains the image and text.
> Applying it to the div applies it to everything in the div. Until there
> is a css attribute something like background-filter, you will have to use
> two objects: One that has a background image and is filtered, and one
> that displays text. That is what you have done on your sample page, but
> you don't need to duplicate the text to do what you are trying to do.
> Using what you've already got, delete the text from <div id="page">
> </div>, and replace your #page selector styles with these styles:
>
> background-image: url(http://www.the-chaos-engine.20m.com/water.gif);
> filter: alpha(Opacity=50);
> position: absolute;
> top: expression(page2.offsetTop);
> left: expression(page2.offsetLeft);
> height: expression(page2.offsetHeight);
> width: expression(page2.offsetWidth);
> z-index: -1;
Hmm, will this force the image DIV to be the same size as the Content DIV?
> That should do it, and it works on my "older" (ie 5.0 - company standard)
> browser.
Believe it or not, IE 5.5 actually has fewer CSS flaws than my nice shiny
version 6...!
you've been a great help Ivan,
RM.
Richard Mahoney
> > filter: alpha(Opacity=50);
> > position: absolute;
> > top: expression(page2.offsetTop);
> > left: expression(page2.offsetLeft);
> > height: expression(page2.offsetHeight);
> > width: expression(page2.offsetWidth);
> > z-index: -1;
> ^
> Hmm, will this force the image DIV to be the same size as the Content DIV?
>
eventually) - Netscape 6 doesn't seem to work with this, does the
expression(page2.offset etc..) have a Mozilla equivalent?
Nearly there (it will look stunning, I promise)....
RM.