Using a Transparent Header

  • Resolved trivum

    (@trivum)


    15 years, 2 months 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.

Viewing 4 replies - 1 through 4 (of 4 total)
  • esmi

    (@esmi)

    15 years, 2 months 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.

    Thread Starter trivum

    (@trivum)

    15 years, 2 months 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.

    esmi

    (@esmi)

    15 years, 2 months ago

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

    Thread Starter trivum

    (@trivum)

    15 years, 2 months 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;
Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Using a Transparent Header’ is closed to new replies.