Solved

Problem with opacity inheritance

Posted on 2012-03-29
3
298 Views
Last Modified: 2012-04-02
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
0
Comment
Question by:NoraWil
  • 2
3 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
Comment Utility
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
 

Author Comment

by:NoraWil
Comment Utility
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
Comment Utility
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

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Read about how to choose the best possible content marketing agency to suit your needs. Content marketing has become an integral part of running a successful tech business, so it is wise to be informed.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now