Support » Fixing WordPress » Banging my head to the wall with wrapper transparency

  • Hi all!

    I’m still a total newbie with wp and currently working on my first actual site.

    I have a problem with the wrapper transparency (theme Goran).
    I want the site to show a full page background image with transparent
    page and wrapper. I’ve tried numerous different approaches that I’ve found around the web but none have worked thus far (already created a child theme that I’ve
    modified).

    I used firebug to pinpoint the problematic divs and they were these:
    <div class=”content-wrapper clear”>
    <div class=”entry-content”>

    The site is still running with MAMP so can’t provide a link.

    Hope this makes any sense and thanks in advance!

    Br,
    korkki62

Viewing 7 replies - 1 through 7 (of 7 total)
  • Setting a background image is straight forward enough. This article contains a number of ways of doing this: http://css-tricks.com/perfect-full-page-background-image/

    Once you have a full-page background in place you need to use firebug to find the html elements that you would like to make transparent. For instance if the element is <div class=”content-wrapper”> you will have to add this in your child theme’s CSS:

    .content-wrapper {
        background: rgba(0,0,0,0); /* The last 0 is transparency you can change it to any value between 0 and 1 */
    }

    To make multiple items transparent use this:

    .content-wrapper,
    .entry-content {
        background: rgba(0,0,0,0); /* The last 0 is transparency you can change it to any value between 0 and 1 */
    }

    After applying this CSS if you see a line through these CSS rules in FireBug then you can try this:

    .content-wrapper,
    .entry-content {
        background: rgba(0,0,0,0) !important; /* Notice the !important */
    }

    Let me know if this helps.

    Thanks for your quick reply Hassan!

    Unfortunately your tips didn’t do the trick this time.

    I’ve added a background image with “Simple Full Screen Background Image”-plugin but even though I tried the above CSS you gave me the wrapper and content are still blocking it almost completely. I added the CSS to the bottom of my child theme’s CSS if it makes any difference.

    Any advice where to proceed next?

    I really appreciate your help guys/girls!

    I’m afraid I can’t be of any more help without looking at the page.

    Hi Hassan and others,

    I was able to migrate the site from the local server and
    it’s now running public here: http://www.upsuomi.fi

    So I’d like to adjust the currently white wrapper around the content area to be transparent and also adjust the content box opacity without affecting the opacity of images and text.

    Help is greatly appreciated!

    Please give this a try:

    .site,
    .site-content,
    .content-wrapper,
    .content-area {
        background: rgba(0, 0, 0, 0) !important;
    }

    Wow thanks a lot Hassan – that did the trick!

    How do I alter the code if I want other areas to be completely transparent and
    the content box to be white but with something like 0.6 opacity?

    You can change the opacity level by replacing that last 0 in rgba(0, 0, 0, 0). This will give you a black semi-transparent background. If you need it to be white then use this rgba(255, 255, 255, 0) and change the last 0.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Banging my head to the wall with wrapper transparency’ is closed to new replies.