Add CSS opacity to header image

  • Resolved madebygift

    (@madebygift)


    7 years, 3 months ago

    Hello.

    Is anyone able to tell me which part of the CSS in the Twenty Seventeen theme I need to change to alter the opacity of the header image?

    The closest I can manage is to get the bottom of the header image to go dark using this CSS:

    .custom-header-media:before {
    background: rgba(0, 0, 0, 0.4);
    }

    But, this only changes the background on the title/ logo and site description. I just can’t seem to figure out what the correct CSS selector is to alter the appearance of the whole header image.

    You can see the site at https://easyopt.website/amoresunderland/.

    Thanks in advance for any help.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    The header image is using the <img> tag and therefore is a foreground element (CSS ‘background’ won’t work).

    For foreground elements use the CSS ‘opacity’ style.

    E.g. 

    
.has-header-image .custom-header-media img {
    opacity: 0.5;
}
    • This reply was modified 7 years, 3 months ago by Andrew Nevins.
    Thread Starter madebygift

    (@madebygift)

    Hi Andrew,

    Thank you for explaining that. The effect I’m after is to make the image darker, which I don’t think I can do with CSS opacity?

    Is there different way to achieve this or would I need to edit the image or overlay a div and manipulate that?

    Thank you,

    D.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In that case, try targeting the background on the title/ logo as you did before, but add a height style to make that background taller:

    
.twentyseventeen-front-page.has-header-image .custom-header-media:before {
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
}
    Thread Starter madebygift

    (@madebygift)

    Hi Andrew,

    Brilliant – that’s done the trick, thank you.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Add CSS opacity to header image’ is closed to new replies.