CSS Opacity Fun

[Chrisco]

Im playing around with CSS Opacity and I need to take a break from this nightmare! But before I do I figured I would post my problem here since maybe someone out there can help me.

Long story short is I want a background color with slight opacity, and the text / images to be full opacity. The solution which works the best for me is from trial and error is creating 2 DIVs, position them in the same spot on the screen. Div #1 will have a z-index of 0, and Div #2 a z-index of 1. DIV #1 will have the background and #2 the image/text.

The only problem with this is I want my layout to be center aligned AND I have specific pixel dimensions to follow. I have an easy enough time getting all of this centered but then I run into the problem of creating that semi-transparent background.

I have tried to do the following and havent succeeded either way. If anyone has any more suggestions please do tell!

Trial 1:

//Fake CSS Properties for example

Div#Holder{
opacity: 50;
}

Div#Image{
opacity: 100;
}

<Div ID="holder">
<Div ID="Image">
<Img src="ect.jpg" />
</Div>
</Div>

Well this doesnt work, since the image div is embedded in the holder div it inherits the holder div opacity properties for some reason!

Trial 2:

<Div ID="MainHolder">
<Div ID="holder">
</Div>
<Div ID="Image">
</Div>
</Div>

Using the same CSS above this creates 2 div elements, now this would work if I could make them overlap each other but when I try to make them position: absolute this creates the div to dissapear, I assume because it is nested within another div and becomes confused.

Now im no expert so please correct me if I did any stupid mistakes, just trying to learn something new. Hope someone can help out, thank you.

[djr33]

Well.... are you just wanting a semi-transparent background image behind the text?
If so, why are you coding ANYTHING... just open photoshop, and make two layers, one of your image, the other of the background color on the site, then fade it to like 50%... and you're done.

...right?

[jscheuer1]

Well.... are you just wanting a semi-transparent background image behind the text?
If so, why are you coding ANYTHING... just open photoshop, and make two layers, one of your image, the other of the background color on the site, then fade it to like 50%... and you're done.

...right?

That's good in all browsers that directly support alpha transparency. Most modern browsers do but, IE doesn't, it requires a special filter that is not applied as a background image, so there must be no background image for IE but in other browsers, your image should be the background. There are various ways to set IE only css that can accomplish that part. Also keep in mind that generally only the .png format can render this partial transparency. But, owing to the various quirks across browsers as regards opacity and the facts outlined in the first post in this thread, this is still perhaps the best approach.

[djr33]

Well.... that's one way. But I meant actually saving a .jpg or whatever with nothing special about it. don't use css for making it transparent, but actually make two layers in photoshop, one on top of the other, and save, flattening the image... making a fully opaque image that is your original at part transparency on another background.
In short, use photoshop to create a graphic instead of using anything special to make the browser do so.

[Chrisco]

Thanks for the replies. As for the background image suggestions I have tried using the .png approach. For some reason I have part of a logo with full opacity (.png) and a special IE script I found to support IE .png support and it works flawlessly. I attempted to make a partially transparent background pixel but when I applied it as a background image the opacity didnt work, not sure why. So I figured CSS would be an interesting way.

As for the JPG approach the reason I want to use CSS opacity is because I am using a large background image and I want the user to be able to be able to see through part of the div, just gives it an interesting look.

[djr33]

...you're still missing my point.
I'm not talking about a transparent effect, but rather an image that just makes it look like there's an effect.


Umm... just an image with the background superimposed AS PART of the image... not some transparency effect.

Would that work for you?

[jscheuer1]

This is how I did it (more or less) for a table cell within a draggable division:

<style type="text/css">
#semiTrans {
width:100%;
background:url('images/semi_trans.png');
}
</style>
<!--[if gte IE 5.5]>
<style type="text/css">
#semiTrans {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/semi_trans.png', sizingMethod='scale');
background:;
}
</style>
<![endif]-->

To see the result click on:

• 2004 Pictures! •

in the lower left part of the page.

djr33's idea would work if the background will always line up with the 'fake' in the same way in all browsers, window sizes and resolutions.

[djr33]

Yeah. That's a good point. It might vary.

However, if the background were a solid color, that would work. I see now, though, that we're not talking about a stationary object anyway. So... yeah.

About your version, I'm using Safari, the default mac browser, and its streaking.

[jscheuer1]

Not saying that you are but, it looks like you are low on video memory. Probably a Safari thing. I don't have a Mac to test on but I did use a screen shot service to at least verify that the basic screen looked OK. That entire site is old work that each time a new festival comes up I try to bring the code up to standards reflecting knowledge I have gained since the last time but, expediency often wins out. The current year's crop of pages are tested on IE, FF and Opera - all for the PC. If you have FF for Mac, give that a shot. I am assuming the streaking only occurs when you drag the object and/or as it drops initially. Thanks for the screen shot. Any ideas what causes that?

[djr33]

It isn't my computer. I've got a top of the line G5 with 2gb ram, plenty of video memory (not sure on a number, but take a guess), and I do video editing.
I'm not sure what's causing it, but yeah.... only when i move it around (and quickly). It might be video memory, but just overloading it for some reason.
I've got a PC too... haven't tested in those browsers... will in a sec.

It might just be safari... its quirky sometimes, but its a pretty compatible browser.... not usually problematic.