Transparent header background

  • Resolved Derek Allen

    (@graphic-company)


    8 years, 10 months ago

    Hi, I’m looking for a custom CSS to make the header background colour transparent. I would like to have a PNG image in the header container so you can see the background image of the site underneath the transparent image and not the header background colour.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @derek Allen

    The custom CSS for making transparent header image would be:

    .header-background {
    position: relative;
    height: 250px;
    opacity: 0.4;

}

    You can put the opacity range from 0-1 as you like.

    Best Regards!!!

    Thread Starter Derek Allen

    (@graphic-company)

    Hi Sanjog. Thanks for the quick reply

    So in other words the Background is the header container and there is no way of making the background transparent and having a 100% opacity, transparent PNG Image as the header then?

    What i’m getting with the code you gave me makes the whole header transparent. I only need the background colour of the header container to be transparent / Opaque.

    Thanks.

    D

    Thread Starter Derek Allen

    (@graphic-company)

    I figured it out thanks.

    #header .header-background { background-color: transparent !important; }

    This way I can have a transparent PNG in the header-background.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Transparent header background’ is closed to new replies.