Image Overlay - Help!

HTML-CSS
1

Hey everyone,

Brand new to the site and forums… i’m trying to put an overlay onto a background image I’m using but I cant seem to get it to work. Ive managed to do it before but I cant remember what I did. Basically, my bg-img is black and white, and i want to have a semi transparent blue overlay ontop. Anyone know what im talking about?

<div id="container" class="bg-img">
         <div class="overlay">
</div>
</div>

CSS:

#container {
position: relative;
}

.bg-img {
background: url('images/consultation/blackwhite.jpg') no-repeat center center;
background-size: cover;
width: 100%;
}

.overlay {
position: fixed;
background: blue;
opacity: 0.6;
}
2

A lot of hits if you Google it. Have you tried that?

1 Like
4

The ones I found were related to ‘onmouseover’ which isnt the effect im going for. I’ll keep digging.

5

I’m not exactly sure what effect you’re going for but maybe this will help;

1 Like
6

I got it to work. Thanks guys!

    * {
        height: 100%;
        width: 100%;
    }   
    body {
        box-sizing: border-box;
        padding: 0;
        margin: 0;

    }
    #container {
        position: relative;
        width: 100%;
        height: 100%;

    }

    .bg-img {
        background: url('images/consultation/blackwhite.jpg')no-repeat center center;
        background-size: cover;
        width: 100%;
        height: 100%;
}

    .overlay {
        background: rgba(255, 255, 0, 0.61);
}


html

<body>

    <div id="container">
        <div class="bg-img">
            <div class="overlay">
            </div>
        </div>
    </div>
1 Like