Forum Moderators: not2easy
What I want to do is create a background image that is semi-transparent so that it lets the background image of the first DIV show through the second DIV a little bit.
I've played with Opacity in PhotoShop quite a bit to create the semi-transparent image I need, but it seems like once the image is viewed on the website, it's either all transparent, or all white. No in between. I tried using both PNG and GIF formats.
I think an image can be transperant in photoshop, but when it is saved as a gif/jpg/png it just becomes a plain image, and therefor a solid colour. It is Photoshop that contains the software to show the transparency effect.
As you mention, you can have a full transparent gif, which completely removes the bg colour.
My fix for this, using your example, was to create a new transparent image for div 2 that included the image used in div 1. Effectivley removing the need for div 1.
However, i assume you didn't put div1 in just for kicks, and that removing it is not an option. I think though you might have to rethink the effect you are trying to create.
If you do manage to find fix, i would be extremly greatful to here it though.
Hope this is of some help.
Webboy
I have a fluid design - my webpages expand or contract to fit the height and width of the browser window. So using an image in my second DIV that cointains a faded version of the image in the first DIV is not an option as they wouldn't always line up perfectly.
Mobull,
I don't see anything in those images that has the effect I'm looking for, or did I overlook something?
If you have access to Mozilla, check
[mozilla.org...]
and look at the shadow. Is that the sort of effect you're looking for?
Jon.
So if IE doesn't support that, then I guess that answers my question. Thanks.
i had some luck with a transparent background image. i saved a 400 x 400 white square at 25% opacity in photoshop as a png-24.
in my html document, i set a tasteless background image in the body with CSS, i also added a div on top of it. the div used my transparent png as a background and it had text in it. it worked!(firebird, explorer, Mac) i could see the bg through the div, flexible layout too.
this doesn't address your problem though. i had no luck with transparency when i applied a bg image to a div, then put the transparent div on top. i also had no luck with a png-8. a 1px x 1px png-24 also failed me in both situations.
[2]<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body{
background-image:url(images/box.jpg);
}
#fader{
background-image:url(images/fade.png);
width:400px;
height:400px;
margin-left:10%;
}
</style>
</head>
<body>
<div id="fader">
hi, hello, how are you?
</div>
</body>
</html>[/2]i'll be playing with this more later...
