Problem with opacity inheritance

I have been struggling for hours with the following problem:

I working on a Drupal 7 site and want to show a background image on all pages.
This is the CSS-code I use to show the image. This works as expected:

html {
    background:  #ffffff url('logo_achtergrond.jpg');
    background-repeat: no-repeat;
    background-size: 120% auto;
    background-position: -200px -0px;
    position: relative;
}

My Drupal pages exist of three div wrappers
I use the following code to make the background image visible through the wrappers:


.main-wrapper {
    opacity: 0.94;
}
.header-group-wrapper {
    opacity: 0.94;
}
.main-menu-wrapper {
   opacity: 0.94;
}

Here comes my problem. Every content I place on the pages inherits the opacity from the parents. So the the background image is visible through the text (not a real problem) but also through all pictures (mostly jpg files)  on the page (a huge problem).

So I want to make the jpg files not to inherit the opacity.
Setting the opacity of the jpg to 0 makes it dissappear of course an setting it to 1 doesn't change anything. I experimented also with some z-index settings, but didn't help me any further.
How can I solve this
css-problem.png
NoraWilAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

COBOLdinosaurCommented:
The opacity of contents will always be inherited, so you could try setting the opacity of the images to 1.06 to compensate.  I've never tried it bu in theory it should work.

Cd&
NoraWilAuthor Commented:
Thanks for the reply.
I tried out your suggestion, but I'm afraid it is a good theory, but nothing more than that.
I tried all kinds of values (from -9999 to 9999), without any luck.
COBOLdinosaurCommented:
Yeah the whole point of using opacity is to apply it to the whole element and that means all of its contents. You could try setting the image in its own div and then absolutely positioning the div, but absolute positioning can be a maintenance headache and if the page needs to be fluid and re-sizable then it takes scripting to keep it correctly positioned.


Cd&

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.