WordPress Transparent Header & Body

Working on a WordPress site that we’re putting a Parallax background in, but I’m having a tough time with making the header transparent and perhaps a little opacity in the content.

For example, the header is currently following this style:

Read More
.header {
  border-top-color:#F09C41;
  border-top-style:solid;
  border-top-width:0;
}

using the following doesn’t help:

.header {
  background:transparent !important;
  border-top-color:#F09C41;
  border-top-style:solid;
  border-top-width:0;
}

Similar with the content. You can see the demo site here: http://tinyurl.com/nutvfvb

Any help would be greatly appreciated. I thought this one would be easy…but I guess not.

Related posts

Leave a Reply

3 comments

  1. You div titled “main-content” has a white background-color to it. So when you add any transparency your header appears white.
    You can use:

    .header {
       background-color:transparent;
    }
    

    and change the background-color of the “main-content” and view it in a browser.

    Try this:

    div.main-content {
    background-color:red;
    }
    

    and your header should appear red.

    This is only to show you that the header is transparent when you add:

    .header {
       background-color:transparent;
    }
    

    Hope this helps!!!