Add opacity to header

[sara-clayton2]

@thomasbradley

On all the billboard images on each page we have an opacity overlay of a black color and for some reason even though the color is set to black its appearing white? any way to fix this ?

[sara-clayton2]

@thomasjbradley

[vivkay]

Hi @thomasjbradley,

Just to expound this issue, we are using jekyll to populate our billboard images; and have the a hero value (or image name) specified in the yml frontmatter on each html page. The images are working nicely.

Our yml:

---
layout: default
hero: blog-main-banner.jpg
---

And this is from our html on the "layout: default" page (this creates that billboard section):

    <header class="hero" role="banner" {% if page.hero %} style="background-image: url({{site.baseurl}}/img/{{page.hero}})" alt="" {% endif %}>
    </header>

The issue is with the css - currently we have this:

.hero {
    text-align: center;
    max-height: 75vh;
    position: relative;
    background:
            linear-gradient(
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.45)
        ),
        no-repeat center bottom / 100% 80%,
         no-repeat center top;
    background-color: grey;
    background-size: cover;
    padding-top: 46%;
}

While we see the image, no opacity is showing. I assumed it was an issue because we are calling our images from the html file as inline styling, instead of directly from css, so I tried removing the 'style' portion from our header, and adding it right in the css file. But it just made the images disappear (perhaps I typed something incorrectly?)

.hero {
    text-align: center;
    max-height: 75vh;
    position: relative;
    background:
            linear-gradient(
            rgba(0, 0, 0, 0.45),
            rgba(0, 0, 0, 0.45)
        ),
        no-repeat center bottom / 100% 80%,
    url({{site.baseurl}}/img/{{page.hero}});
    background-color: grey;
    background-size: cover;
    padding-top: 46%;
}

Any ideas to what we're doing wrong here?

Thanks!!

[thomasjbradley]

The code you have near the top is the best way to do it:

<header class="hero" role="banner" {% if page.hero %} style="background-image: url({{site.baseurl}}/img/{{page.hero}})" alt="" {% endif %}>

But the problem you're running into is that any CSS you write for background-image in your CSS file will be over written by this.

There are two solutions I can think of:

1. Include an empty <div> in the header that can be positioned over the image with the black background.
2. Use ::before or ::after and position one of them over the image with the black colour.

[sara-clayton2]

So i added the ::after and it works for the opacity part. but now the opacity won't move down and is covering the navigation and on top of that when the screen gets smaller all the text over the image just spills out of the banner image ( which I can probably just fix in the media queries I'm assuming )

[thomasjbradley]

Try getting rid of the .banner-opacity <div> and putting the ::after stuff right onto .hero.

[sara-clayton2]

I ended up fixing it with a z-index