January 19th, 2004, 05:14 AM
how to have a transparent background image in CSS
I have a background image in my web site which is centered and fixed with no repeat.
I would like to make it some what transparent.
I know that it can be done by manipulating the image itself, but I need to do it dynamically using CSS.
I tried adding the filterpque(alpha=0.5 style=0) attribute to the body but that made all the elements in the body (except for background image) transparent.
does anyone know how I can do it?
January 19th, 2004, 01:56 PM
i may be able to help you.
what you do, is place a <div> that spans across all of the width and height of the screen that has the filter and whose background-color matches that of your entire pages background-color:
just add that anywhere within your body after youve changed the background: attribute and then from there you can test out how little opacity you want it to have. if you need any additional help, just ask.
<div style="background: #ffffff; width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; z-index: -1000; filter: alpha(Opacity=47);"></div>
January 19th, 2004, 04:12 PM
it's a nice solution, but the problem is that when I set:
<div style="background-color:#003399; width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; z-index: -1000; filter: alpha(Opacity=20);"></div>
Then the div streches itself from the (0,0) cooridnate all the way to the right, but it goes down only until it reaches the first element.
if I set the width and height to actual sizes in pixel it works fine, but the problem is that I don't know what the user's resolution would be and thus I cannot determine the size of the dive.
The percentage option looks more promising, but it seems that the solution still need a bit more twicking.
January 19th, 2004, 04:44 PM