using transparant backgrounds...

[lowen.f]

Hi, I've designed a site in Photoshop and now I'm trying to export it into css+html + wordpress.

a screenshot can be found here: www.flowen.nl/flowen.png

Now my problem is getting the transparent grey backgrounds right... I've tried using a exported 3x3px transparent png, set it as background img and repeat it.. you can see what happened: Flowen
no transparency at all.. I wonder what the right solution is to tackle this problem.

thx for reading

[rossable]

if there is no transparency then you are most likely viewing in IE6

png alpha support is still under development but IE7 at least shows it as transparent. though the colors do change from IE7 to Firefox.

i'm viewing it right now and it looks fine. (Firefox) update your IE browser or use .gif

[rossable]

oh! wait... it's not displaying correctly.

to get that effect use CSS

filter: alpha(opacity=55);
opacity: .55;

the web still hates alpha layer png's. sorry mate.

[lowen.f]

that's strange.. because I'm also looking at it in Firefox, but the grey bg isn't transparent at all. I'm on a mac and (sadly) don't have acces to IE...

[lowen.f]

ah yeah, I tried that code, but the child elements also got transparant..

[rossable]

so set their transparency to 100

class {
opacity 50...
}

class * {
opacity 100...
}

[lowen.f]

I just added the code (from CSS Transparency Settings for All*Browsers - CSS-Tricks) but the child don't seem to get a opacity of 100... hmmm

edit: on the bottom the comments say the same thing.. guess there is some more code needed. the last guy comments this:

You can’t use nested div since it inherits parents opacity level as his 1.0-opacity. You should use the same level foreground div, absolutely positioned over transucent background div, with higher z-index.

now only need to figure out what the code should be :o

[rossable]

-moz-opacity:0.5;
-khtml-opacity: 0.5;

depreciated.

remove those lines and it should work fine. IE may not display the transparency but you really don't need the effect. it's just eye-candy. should work fine in Mozilla, Opera, etc. just not IE

[chriscoyier]

Child elements (unfortunately) cannot be any less transparent than their parent elements. You may need to force the content into that area with some kind of CSS positioning so it doesn't inherit that transparency:

Non-Transparent Elements Inside Transparent*Elements - CSS-Tricks

[lowen.f]

Hey guys.. thx for the possible solutions.. I will have to try to avoid it being a child element.. though that will be hard, cause it's a blog and will have to find a way to get the transparent background grow with the (variable) content, while not being a parent div...

Originally Posted by rossable

it's just eye-candy

Well, in this case I want the grey transparency because the top of the content has a black background and the bottom has the white/blue'ish gradient. This of course means I can't use black or white as text color because it will be unreadable with the same background.. so my solution was using a transparent block, cause I also didn't want it to cover the background graphic. edit: so wait a sec.. it IS for eye-candy :P