Search code examples
csswordpressopacity

Images appearing too dark

Header images on this site I'm building are appearing too dark - I can't see any opacity is being applied - http://www.stayinblackpool.co.uk/ - any ideas what could be causing this?

Tried to make opacity 1.0

Solution

  • Opacity is being applied - in the form of background alpha key. Here is your markup:

    <div class="featured-image">    
    <img src="http://www.stayinblackpool.co.uk/wp-content/uploads/2019/02/header3.jpg">
    <div class="overlay">
        <div class="grid-mid">
            <h1 class="page-title">Serviced Holiday Apartments in North Shore, Blackpool</h1>
        </div>
    </div>
</div>

    and here's associated CSS:

    .overlay {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

    If you notice background has rgba, 0.5 is causing 50% opacity. I would remove the background attribute completely.