[Resolved] CSS Problem (header)

Home Forums Support [Resolved] CSS Problem (header)

Home Forums Support CSS Problem (header)

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #246236
    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

    #246245
    dasigna

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

    #246318
    Tom
    Lead Developer
    Lead Developer

    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?

    #246347
    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. πŸ˜€

    #246455
    Tom
    Lead Developer
    Lead Developer

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

    #246521
    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.

    Screenshot

    What could be the reason for that?

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

    #246543
    Tom
    Lead Developer
    Lead Developer

    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?

    #246551
    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.

    #246720
    Tom
    Lead Developer
    Lead Developer
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.