WordPress.org

Forums

Twenty Eleven
Transparent Header (no white background) Twenty Eleven theme (5 posts)

  1. candace123
    Member
    Posted 3 years ago #

    Hi I would like to make my header transparent (no white background) is this possible I am using the twenty eleven theme? My site http://myhealth365.co.za/

    http://wordpress.org/extend/themes/twentyeleven/

  2. peredur
    Member
    Posted 3 years ago #

    Well, you can set:

    header#branding {
      background: transparent;
    }

    It won't make any difference because the background behind it is white.

    So you could also set:

    div#page {
      background: transparent;
    }

    ... but again, it won't make any difference because the body background is white by default and so it'll still be white.

    As far as I can tell you could even set:

    body {
      background: transparent;
    }

    ... and it still wouldn't make any difference. Am I missing something?

    Cheers

    PAE

  3. candace123
    Member
    Posted 3 years ago #

    Thank you for the reply, perhaps this is a better example
    http://myhealth365.co.za/restore-homepage/ as you can see the header is a white rectangle which overlaps the background image
    I would like this header to be transparent to see the background image behind it?

  4. peredur
    Member
    Posted 3 years ago #

    You'd need to change this rule:

    #page {
      background: none repeat scroll 0 0 #FFFFFF;
      position: relative;
    }

    You could add a new rule at the end of your child theme style sheet as follows:

    #page {
      background-color: transparent;
    }

    Note that it must be a child theme since you're using a default theme. If you don't use a child theme, any changes you make might be overwritten by a WP update. This, of course, also applies to any changes you may already have made if you haven't used a child theme.

    Having said that, you probably won't like the result because the background image will then appear behind everything, which would not be to my taste.

    To correct this, if you want to, you could reestablish the white background on the areas of the page where you wanted it.

    Alternatively, and this would be my choice, you could create an image that you wanted to have as the background to the header, by chopping the appropriate bits out of the body background image. Then you can set this image as the background for the header only. So it would look as though one image was being displayed, but in fact they would be different---if related---images. This is quite a common technique, and you could do something similar on the other areas of the page if you wanted other bits of the background, but not all of it, to look as if it was showing through. You'll need to position the background carefully, though, to account for different viewport sizes.

    HTH

    PAE

  5. candace123
    Member
    Posted 3 years ago #

    Thank you very much for the assistance, would it be possible for me to resize my page so that it starts just below the menu bar ?

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic