[Resolved] CSS Problem (header)

[Sebastian]

Hi,

I have a problem:

I built a small site: http://bode.codable.de/. For the header and the content area, I used the following CSS Code (in child themes style.css):

#masthead, .one-container .container, h1.entry-header , h1.page-header {
    background: rgba(255, 255, 255, 0.85) !important;
}

The content area is white and transparent, but it doesn’t work for the header (#masthead).

Interesting: It get’s transparent as it should be, if I use the “inspector” (STRG + SHIFT + Q) in Firefox.

Any suggestions?

Thanks
Sebastian

[dasigna]

… weird!
already tried to put the transparency into another div? header or inside-header eg.?
what happens if you deactivate the autooptimize?

[Tom]

That is strange..

My initial thought was the same as dasigna – another element had the same background inside the header causing the layers to stack.

Couldn’t find that happening though.

What if you only use #masthead (or .site-header) in your CSS and omit the other selectors for now?

[Sebastian]

Strange, indeed.

I deactivated Autoptimize. That changes nothing.

I tried to use several CSS classes in several variations. Nothing happens.

There is only the #masthead. And as I said, the opacity works fine, when I inspect an element. When I close it, the header gets completely white again.

I leave it as it is for now. If opacity is really needed in the header, I will use an pixel image. I hope, that will work. 😀

[Tom]

I wonder what happens when you reduce the opacity down to something like .2?

[Sebastian]

What the heck 😀

Then the header gets opacity. Why is the effect in the header lower than in the content area. It looks like the half of the opacity.

What could be the reason for that?

Good to know that I have to set the values seperately.

[Tom]

Every once in a while something comes along that makes no sense. This is one of those times.

It looks like the background is being applied twice to the header – stacking on top of each other making it less transparent than the other elements.

The CSS I can see using developer tools says otherwise.

What if you remove the header background color completely from the Colors add-on?

[Sebastian]

That changes nothing.

However, thanks to your tip, I know now, how to deal with it.

If I find the reason, I’ll let you know.

[Tom]

Sounds good 🙂

[Author]

Posts