Parallax Pro Site Header transparency and height

[angelbedear]

Hi,

Newbie here, does any one know how to add transparency to the site header and add some height to it? I want the background image to show through underneath the transparent header, like on this site: http://allume.com/

I'm just starting to customize my site and I can change the color of the header but not add transparency unless I scroll down. I've added some padding to the header to make it taller, but I know there's probably a better way.

Here's the link : http://sample3.keeniconcepts.com/

Thank you in advance!
Angie

[dccmedia]

Hello Angie, I hope this helps.

.site-header {
background-color: #72544d;
left: 0;
opacity: 0.5; // Transparent
position: fixed;
top: 0; // This will place the menu all the way to the top.
width: 100%;
z-index: 999;
}

I hope this helps. I'll be uploading a little video to show what this will look like 🙂

Good luck,
Chris

[dccmedia]

Just a little fyi... I'm learning this as I go along. A newbie as well. 🙂

[angelbedear]

Thanks so much I'll give it a try!

[angelbedear]

It kind of worked, I got the image to show though by putting it up in site header, but the site header logo also got more transparent...closer, but not there yet. I'll keep messing with it, thank you Chris.

[sean nelson]

Create a transparent background image (25x25 should be fine). Then add the image as a background image for .site-header.

.site-header {
background: url(/wp-content/uploads/2014/09/black-opacity-75.png);
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 900;
}

This will make the header background optic on all pages. It looks good on the home page but not so good on interior pages. (black background image with .7 opacity becomes grey on interior pages when body background is set to white) For the site I'm building I isolated the home page header by adding the following code.

.home .site-header {
background: url(/wp-content/uploads/2014/09/black-opacity-75.png);
}

Then I left the code for .site-header as originally written. Now header is optic on home page and black on interior pages.

You can see this on my build site at fourtoscore.com. (If you're reading this in a couple of weeks site will be at oldviningsinn.net)

[angelbedear]

I'm sorry , I never saw this reply! I'll give it a try, thank you!

[angelbedear]

That worked to get the transparent header, but how do I get my background image to get behind it and show through?

[Author]

Posts