Support » Fixing WordPress » Transparent Header Background (Twenty Eleven)

  • Resolved JMMajcher


    I am trying to use a header which includes transparencies, but I can’t get rid of the background color.


    I saw posts saying to add

    #page {
    #main,#primary {
    #access {

    but this hasn’t worked for me (it is currently in my CSS).

    Thank you for you help!

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator kmessinger


    Did you check for a color under apperance?

    Moderator kmessinger


    check color in css under body, back-ground color.

    Ah, the problem is on the “Theme Options” page. You need to make sure there is nothing in the “Header Background” field. Thanks!

    Hi JMMajcher,

    I looked for my ‘Header Background’ field on my ‘Theme Options’ page and I havent got one ๐Ÿ™ . Is that the only think that you done? Did you amend any CSS etc. I been battling with this ‘problem’ far too long now and I can’t believe I cannot find a simple solution.

    Any help will be appreciate. I am using a png (24) image as produce by Fireworks.


    I am also trying to get the header transparent and can not do it.

    Iยดve added this to my child theme style.css:

    #branding {
    	border-top: 0px solid #bbb;
    	background-color: transparent;

    The border command work but the background is white. I have checked the “Header Background field” in Theme Options page. When I delete the standard #fff code and save the settings, the standard will appear again. Is there another plane (like body etc.) which is between the header image and the background image?

    Here is the site I am talking about:

    C L I C K




    this code work for me to get the header transparent:

    body #page {background:transparent;}

    Now the complete body is transparent and I have to add the following, to get the content background white again:

    #primary {background-color:#fff;}

    This works but there is one poor issue. A small bar between the navigation bar and the content is still transparent. I have searched and tried to find the responsible CSS code, but there are several lines for that in the css file.

    Is there any other “easy” way to get only the header image background transparent?



    Forum Moderator

    Please post your own topic and stop posting to old threads.

    I don’t think it’s wrong to add to this thread. I found it in Google, and pappe’s solution got me most of the way there to solving the problem, but the thread wasn’t complete without a total solution to the issue. The rest of it is solved by the following:

    body #page {background:transparent;}
    #main {padding: 0;}
    #access {margin: 0 auto; box-shadow: none;}
    #primary {background-color:#fff;}
    #branding { border-top: none; }


    thanks guys ๐Ÿ™‚ keep on adding good info to old posts… this helped me and I’m sure, many others too ๐Ÿ™‚

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Transparent Header Background (Twenty Eleven)’ is closed to new replies.