Is there any way that you can apply opacity properties to a background url in your css and have those attributes consitent to your bg img alone?

eg:
#bg {background: url(blah.jpg) top left no-repeat; opacity:0.5;} (or something to that affect)

The probem is, it always affects the child (insert lame pun here). I need the parent to have an opaque bg with an expanding child (ie. addition of text and imgs) without being effected by the parent opacity properties (ie. text and img don't come out translucent).

i've been here: Mandarin Design
and this site offers and interesting alternative: Spiral Demo
and here is a couple of my own experiments: test

What i really want is to be able to set opacity to a bg img exclusively. I've tried pseudo classes (first-child elements), tampering with css, tampering with inline spans and i can't get anything to work.
My guess is, opacity is only a new creation and either nobody has any idea yet ar the program itself hasn't developed that far yet- am i wrong???
Any idea's greatly appreciated.

McGuffog.

I think at the moment it's always going to affect the children. I've had the same issues and haven't used opacity as much as I would like bcause of it. Hopefully in time we'll have a little more control with it.

For now though we have to wait.

Thanks for the links by the way. I've seen the spiral before, but the other was new to me as was your test naturally. Other than opacity I'm waiting on IE to catch up and allow for border-radius. It might be in IE7, but it'lll be awhle before IE6 goes out of fashion anyway.

Hi, a while ago I played with transparency and scaling: http://www.oplijn.nl/proef/beeldschalen/schalen.html
You won't need to read this language, you can read the sourcecode.

This may be a bit late, 2 years too late... however, for anyone who stumbles on this forum thread as I did, this might be helpful.

You could always use an opac image as the background, like a .PNG

Originally Posted by Jadelina

This may be a bit late, 2 years too late... however, for anyone who stumbles on this forum thread as I did, this might be helpful.

You could always use an opac image as the background, like a .PNG

The problem with using a transparent .png is that IE struggles if you try to do anything clever over the top. Try using a lightbox effect or expanding div with moo or something similar when you have transparent .png on the page and you'll see what I mean, you'll get an incredibly jerky animation.

The best workaround I've found in this situation is to use custom style sheets for IE which use pseudo opacity with a transparent gif, whereby you make every other pixel transparent in a block of colour. It's a hassle, it doesn't look nearly as good as proper png opacity, and can only really be used if you want a semi transparent single colour background but it can be better than nothing if the design really requires a semi transparent element.

I used to grumble about this problem, but then realized that opacity affecting all of the children is actually quite convenient. It allows us to do some neat fade in/fade out effects on entire elements in Javascript. Don't count on the spec being changed any time soon! This does have the affect of not allowing easy opaque backgrounds using CSS, but as pointed out, a simple .png can be used (in modern browsers).

It is not a good idea to use large swaths of CSS opacity across a browser anyway, as it has a poor affect on runtime speed, especially in Firefox. If you are going to be using dynamic effects on your webpage, especially anything involving animation, it is best to avoid too much opacity, even if it makes things prettier.

benjo,

I have no idea if this page and the HTML/CSS will help you but this is from a class I took:

http://www.sandysdesignline.com/webb.../wk6final.html

I hope it helps.

It's not every day that a 2 year old buried thread is dug up :eek

As pointed out below, and now tested by me. The method I had posted here does not actually work.

Thank you vangogh.

Mitch I don't think that works, though don't hold me to that if it does. I think once you've set an opacity on the parent you can't override that opacity in the children.

With the code you have the children will still have an opacity of 0.5 assigned to them even though you're specifically applying an opacity of 1.0 to the child elements.

I wish you could do things as you mention. It would make css transparency more useful in my opinion.