WordPress.org

1. David Borrink
   Member
   Posted 5 months ago #

   I'm developing a site where I have a photo background with a transparent body area allowing the photo to come through. I want a solid white background behind the article content area, but I'm having a hard time figuring this out. I have an example of it being done on another site here, so I know it can be done, but Firebug is not giving me any clues as to how they did it (no opacity code settings? So how did it work?).

   Here is the site I'm working on. I'm using Twenty Ten with a child theme. Here is the code for the "Main" div (that's the transparent page area):

   #main {
       background: none repeat scroll 0 0 #FFFFFF;
       border-radius: 18px 18px 18px 18px;
       clear: both;
       margin-top: 20px;
       opacity: 0.7;
       overflow: hidden;
       padding: 40px 20px 0;
       width: 900px;
   }

   And I'm trying to change the background of the "Content" div (just behind all the content area)

   #content, #content input, #content, #content input, #content textarea {
       background: none repeat scroll 0 0 #FFFFFF;
       color: #26265F;
       font-size: 14px;
       line-height: 24px;
       opacity: 1;
   }

   I'm still getting the site background coming through the Main div and making the content transparent, including the picture. I assumed I could use opacity:1.0 to set the content area solid, but either it can't be done, or I'm missing something.

   I've searched a bunch of CSS sites and these WP forums, and general searches, but I'm not finding the answers I'm looking for. Could anyone give me a clue as to what I'm missing?

   Thanks so much for your time.

2. vytaulla51
   Member
   Posted 5 months ago #

   I'm not an expert but I did just run into this same problem more or less.

   First, here's a couple of links that may help:
   http://stackoverflow.com/questions/806000/css-semi-transparent-background-but-not-text

   http://www.w3schools.com/Css/css_image_transparency.asp

   The first link discusses the problem with creating transparent layers - they make everything on them transparent too. So if you want to have a solid background for text (and solid text) you either need to create a separate div for the un-transparent layer, or you need to use a transparent background tile instead of opacity settings in the original layer. That was easier so that's what I did.

   The second article has code for old IE's you might want to add to your Opacity settings if/when you use.

   Hope this helps!

3. sacredpath
   Member
   Posted 5 months ago #

   The problem is if you set an opacity for a parent element, all child divs will take on that opacity also.

   Using the opacity declaration will apply that opacity to all the child divs in that parent. I suggest creating a small (10px x 10px) transparent PNG image that has the opacity you want and then set that as the background image for #main instead of using opacity. You will then be able to set a solid color for the post background.

   It can be done with an rgba background color declaration, but this would require you to jump through hoops using alpha filters for internet explorer.

4. David Borrink
   Member
   Posted 5 months ago #

   sacredpath,

   I had a hunch that parent and child divs acted like this. I'm using your method of putting a transparent PNG image in the #main div and setting the #content div to white background. I can tell it's working, but I'm working through how to get a transparent PNG right now. I keep saving it out of Photoshop but I'm getting opaque image files.

   Anyway, thanks for your help.

5. David Borrink
   Member
   Posted 5 months ago #

   Ah, figured out the transparent PNG issue. This works. Thank you.

6. sacredpath
   Member
   Posted 5 months ago #

   You are welcome.

Reply

You must log in to post.