WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Using a Transparent Header (5 posts)

  1. trivum
    Member
    Posted 3 years ago #

    I have a transparent header that lets the background show through. I also put in a picture background for the site (outside of the content area). When I load the header, however, the background is white (not the background that I wanted to show through).

    I am guessing this happens because the background of the header is set to white. Is that true? If so, do you know where I'd change that (yet leave the background of the main content white)?

    If it's not because the background of the header is white, does anyone know why it's doing this, and is there a work-around?

    I'm using the Twenty Ten theme.

    Thanks for any suggestions.

  2. esmi
    Forum Moderator
    Posted 3 years ago #

    I am guessing this happens because the background of the header is set to white. Is that true?

    Yes. You would need to change the theme's CSS to remove the white background on #wrapper. But be warned that your changes would be over-written the next time you upgrade WordPress or the theme. For this reason, it is recommended that you consider creating a child theme for your customisations.

  3. trivum
    Member
    Posted 3 years ago #

    Thanks for the feedback.

    I removed the wrapper background before. When I do that, the background from the content area is removed too. (I would like to keep that white.)

    I am guessing that I need to create a separate div for the header area and make a css section for that. How would I do that -- create a header area that isn't affected by the wrapper css?

    Thanks.

  4. esmi
    Forum Moderator
    Posted 3 years ago #

    No - you would need to take the background color off #wrapper and add it to the main content area.

  5. trivum
    Member
    Posted 3 years ago #

    OK. Perfect. Thanks for your help.

    For anyone else interested in this, this is what the changes look like in the Twenty Ten theme.

    Take the white background out of the wrapper (originally it was background: #fff;). I'm not sure of the best way to do it, but I simply removed the #fff:

    #wrapper {
    	background: ;
    	margin-top: 0px;
    	padding: 0 0px;
    }

    Then add a white background to the content area by adding background: #fff; to the #main section like so:

    #main {
    	clear: both;
    	overflow: hidden;
    	padding: 40px 0 0 0;
    background: #fff;

Topic Closed

This topic has been closed to new replies.

About this Topic