Transparent color layer over header image

[jenlm]

I am making a child theme for Omega for an independent study at school and I added a background image to .site header. I want to add a transparent layer of color over it, of partial width.

I wanted to make .site-header {position:relative} and add

background:rgba(255,255,255,.9);
top:0;
left:210px;
width:80%;
height:100%;
position:absolute;

to .site-header > .wrap

This isn’t getting the desired result as I’m most likely applying in the wrong place or am not aware of other CSS effecting this area. Any help would be appreciated.

[han]

I am not sure what you’re trying to accomplish, but ‘position:absolute;’ seems not right. try position:relative and use pixel for height.

[jenlm]

On a small scale, this code does as I expect, puts a transparent layer of white over a background image. I don’t want to do this in Photoshop because I only want it on the middle 80% of the site header and when the site scales to a smaller screen, the site title and site description move out of the transparent area. I guess what would answer my question is – what is the class or id of the container or wrap for the site-header?

[Author]

Posts