Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Problem with opacity inheritance

Posted on 2012-03-29
3
Medium Priority
?
313 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 1500 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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

In this blog, I will share you some basic tips for content marketing and to rank your website on Google.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

886 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