use alpha filter/opacity on background image?

liunx

Guest
If i attach a background image to a DIV, is there a way to 'fade' it out with CSS? I saw the thread on alpha filtering divs (threadid=21123)...but cant seem to figure out how to make that work...

JohnI guess I'd better post some of the CSS / HTML for you guys to look at, eh?

I added these styles in my CSS:

#bodyblock {
position:relative;
background: #dcdcdc; background-image: url('../images/joe-birds1.jpg');
background-repeat: no-repeat;
background-attachment:scroll;
color: #333333;
width:650px;
padding:0;
}


.opaque {filter: alpha(opacity=50); -moz-opacity: .5;}
.normal {position:relative;-moz-opacity:1;}


Then in the HTML:


<div id="outer">
<div id="hdr" align="center"></div>
<div id="bar">_<span style="padding:5px;font-size:11px;"></span></div>
<div id="bodyblock" class="opaque" align="right">
<div id="l-col" class="normal" align="center">
<h4 align="center">Menu</h4>
<div id="menuv" class="normal" style="width:50px">
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">Link</a></li>
</ul>
</div></div>
<div id="cont" class="normal">
<span style="position:relative">
<h3 align="center">Two Column Fixed Width with Header &
Footer</h3>


Note - code is trucated. I'm trying to modify a stylesheet borrowed from the ssi-developer.net site - a great 2 column stylesheet with header and footer...

Please advise!

Johnbump! anyone? Please? Don't tell me I need to wash out the graphic in my photo-program.... then I'll need multiple copies of lots of graphics all over the place... ARRGH.

JohnAFAIK "filter" is not part of the current CSS.check out the thread I referenced in my first post!

JohnYou left out the styling class.i included the content of the styling class in the other class... is that why its not working?

JohnI just did a google search and came up with this link (<!-- m --><a class="postlink" href="http://msdn.microsoft.com/workshop/author/filter/filters.asp">http://msdn.microsoft.com/workshop/auth ... ilters.asp</a><!-- m -->) you might find useful.I'm not sure what's going on here but it really screws up on the newer Geckos.
 
Back
Top