WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Need transparent background but a solid content area (9 posts)

  1. David Borrink
    Member
    Posted 2 years 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 2 years 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 2 years 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 2 years 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 2 years ago #

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

  6. sacredpath
    Member
    Posted 2 years ago #

    You are welcome.

  7. CritiKiL
    Member
    Posted 1 year ago #

    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:

    http://airiana.net/main, and on this page (http://airiana.net/main/hello-world/) 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 ;-)

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

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

  9. CritiKiL
    Member
    Posted 1 year ago #

    Ok Thanks ;-)

Topic Closed

This topic has been closed to new replies.

About this Topic