Support » Theme: Twenty Eleven » [Theme: Twenty Eleven] HELP Please!!Header Transparency Issues=Headache!

  • Hi,

    I was wondering if anyone could help me.

    I’m using the latest TwentyEleven Theme for my site and am desperatly attempting to get the header image to be transparent and allow my tile main background image to come through.

    I have saved my Header image as a .PNG 24 with transparancy at the specified dimensions required for the image of 1000×288.However when it’s applied to the site it will either have a black or white background behind it,depending on whether the dark or light theme is selected.

    I have tried to root through the CSS using Google Chromes Developer tools to hunt out any background color settings for the header but am getting nowhere!!

    Please someone be a hero and save me another 6 hours of banging my head against the wall and help this poor soul!!

    Thanks in advance.

Viewing 15 replies - 1 through 15 (of 30 total)
  • esmi


    Forum Moderator

    Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes. Once your child theme is active, we should be able to help with the customisation.

    Hi Esmi,

    I haven’t edited the theme,I was just attempting to find where the issue with the transparency lies.I have backed up the 2011 theme and just paste it back after attempting any changes.

    I will now create a child theme so maybe I can receive a little help with this incredibly irritating issue.

    Thanks for getting back to me.

    #page applies to the entire site IIRC, and it is given a bg colour in the css

    Hi Rev.Voodoo

    I’m actually using a tiled background image for the site which is being displayed correctly,but when I add a transparent PNG as the header image rather than displaying the tiled background underneath it,it dislays either a black or white background which are the dimensions of the header image.



    Forum Moderator

    You need to amend the theme’s CSS – which means creating a child theme.

    right, if you look at 2011s layout, starting in header.php

    <body <?php body_class(); ?>>
    <div id="page" class="hfeed">
    	<header id="branding" role="banner">

    your tiled bg gets applied to the body

    A white or black bg gets applied to #page depending on scheme. Notice that page contains the header and everything else, so it all gets that white/black bg

    you could remove the bg from #page in your child theme, but then you would have to find a way to get it back in to the various elements excluding the header. I’m not 100% sure it would work well with how 2011 is configured….

    I’m currently trying to create a child theme and have followed the guide to do so.I have created a child them stylesheet with instructions in it to import the parent stylesheet.However when I got to the themes in wordpress it says that the .css style sheet for twentyelevenchild is missing.

    I’m actually a little baffled as to why it’s so comlicated to add something as simple as a transparent header image as the whole reason I’ve switched over to WordPress was that everyone told me how simple it was to use and modify!

    Ooops.My bad,style sheet was called twentyelevenchild.css rather than style.css Doh!

    This is the site by the way if you want to see what I mean:



    Forum Moderator

    You can download a pre-made Twenty Eleven child theme from here

    I have now made my child theme and wordpress is seeing it correctly.I falsely assumed that it need the full path for the parent theme…which I’ve now ofund out it didn’t!

    Now to try and sort out this transparency issue…

    Would removing the header “branding” out of the “page” div and puting it in it’s own div work maybe?Any ideas?

    I don’t have access to a test setup… but that sounds like it should work, with a bit of effort

    I’ve also noticed that when using a child theme that the little magnifying glass image is missing from the search form.Im presuming that this is because it is referencing an image from the parent stylesheet?

    magnifying glass issue fixed…..can anyone please help with the header transparency problem?



    Forum Moderator

    You need to remove the background color on #page and re-apply it to #primary, so something like:

    #page {background:transparent;}
    #primary {background-color:#fff;}

    should work.

Viewing 15 replies - 1 through 15 (of 30 total)
  • The topic ‘[Theme: Twenty Eleven] HELP Please!!Header Transparency Issues=Headache!’ is closed to new replies.