Solved

Problem with opacity inheritance

Posted on 2012-03-29
3
304 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
ID: 37782409
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
ID: 37782880
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
ID: 37782980
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

Best Practices: Disaster Recovery Testing

Besides backup, any IT division should have a disaster recovery plan. You will find a few tips below relating to the development of such a plan and to what issues one should pay special attention in the course of backup planning.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jquery add something to a div 4 37
Remove greater than sign 3 43
Syntax Error 2 45
Configuring a checkbox in CSS and php 18 32
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article will shed light on the latest trends when it comes to your resume building needs. For far too long, the traditional CV format has monopolized the recruitment market.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 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

21 Experts available now in Live!

Get 1:1 Help Now