Support » Themes and Templates » Need transparent background but a solid content area

  • Resolved David Borrink


    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.

Viewing 8 replies - 1 through 8 (of 8 total)
  • 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:

    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!



    Automattic Happiness Engineer

    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.


    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.

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



    Automattic Happiness Engineer

    You are welcome.

    Dear David Borrink & sacrepath, You both have really helped me out! I tried altering the codes so that I could use a 10px by 10px w/50%opacity white image, but I never saw it working. I’m sure it’s just my nerves from being soo close to completion ~ lol!

    But I don’t want any solid areas around the text like David has but rather just have the text & image NOT being opacitized as well. Here is my site:, and on this page ( you can see that some of the text is affected. The text at the bottom is not affected thanks to the #content code you created above. Can you help me get the correct code that impliments the use of the white image file with my own specified opacity? Thanks in advance 😉

    Moderator Andrew Nevins


    You may have a better chance of receiving help if you create your own thread.

    Ok Thanks 😉

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Need transparent background but a solid content area’ is closed to new replies.