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?

Improve company productivity with a Business Account.Sign Up

x
 
COBOLdinosaurConnect With a Mentor Commented:
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&
0
 
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&
0
 
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.