CSS background-image color overlay

[PirateStef]

HI guys,
So I got a bit of a head scratcher.

I have this:

#product {
    background: url("img/vanden1.jpg")  no-repeat center;
    background-size: cover;
}

I want to add something like this:

.yellowoverlay {
 /*overlay css here (#E6DD24)*/
}

html:

<div class="yellow overlay" id="product"></div>

But how to do this?
The important things are that the overlay is a separate class, and I don’t want to add extra html stuff. If the html is needed I wil use Jquery to make the div. (for easy overlays ;))

what I found:
https://css-tricks.com/tinted-images-multiple-backgrounds/

but this isn’t reusable on different div’s

[Paulie_D]

Seems easy enough

http://codepen.io/Paulie-D/pen/bqFza

[PirateStef]

Whoa, quick answer!

Thanks Paulie, yes this works great. however now my <h1>

and everything else in my div is also under the overlay.

Do I need a different html structure?

[Paulie_D]

everything else in my div is also under the overlay.

Isn’t that the point of an overlay or am I missing something?

[Paulie_D]

OK…quick re-think.

I added a bg image to the .box and it seemed to work initially but it made the contents also be under the ‘overlay’

So I switched the :after to a :before thinking that would solve it but it didn’t.

It’s should but I guess something else was going on.

Soooo…whilst dabbling I added position:relative to the h1, switched out the opacity setting for an rgba background and BOOM!

http://codepen.io/Paulie-D/pen/vGkHL

Not sure what the heck is wrong (it could be a bug) but using the universal selector for all elements inside the .box divs and adding position:relative gets it done.

When others come on board I’m sure they will work out what I did wrong.

[Paulie_D]

Hmm…apparently, your Codepen isn’t working.

Someone else I emailed, suggested a jquery fix. The jquery would add a child div and this div woud have a class with background color and opacity ect.

A valid suggestion but I dislike ‘styling’ divs regardless of how they get on the page.

[PirateStef]

does this work?
http://codepen.io/Piratestef/pen/gJqkr

[Paulie_D]

Yep…

[dzffafido]

You can just use z-index: 0; for the overlay and z-index: 1; for the div content and the problem is solved !

[zen92]

I may be late to the party but anyways I hope to help someone :) I built on Paulie_D’s answer

http://codepen.io/insearch/pen/GqxQKK

[skittleswrapper]

Great post.

[Nikhil Gowda]

How to do it for image tag? instead of CSS background-image.

[jkesling]

If anyone shows up looking for this solution, there is a slightly easier way to do it. I adjusted PirateStef’s example so you can compare. It uses the linear-gradient() CSS background. You can’t stack a color background and an image, but, you can stack two images, and linear-gradient() returns a ‘rendered image’ as far as CSS is concerned. To get a solid color, semi-opaque overlay, just use the same starting and ending color for the arguments in linear-gradient(). I hope this helps anyone who comes here looking for a solution in the future.

https://codepen.io/jkesling/pen/yKrxXp

[Author]

Posts