Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #173272
    PirateStef
    Participant

    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

    #173274
    Paulie_D
    Moderator
    #173275
    PirateStef
    Participant

    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?

    #173276
    Paulie_D
    Moderator

    everything else in my div is also under the overlay.

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

    #173277
    Paulie_D
    Moderator

    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.

    #173286
    Paulie_D
    Moderator

    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.

    #173287
    PirateStef
    Participant
    #173288
    Paulie_D
    Moderator

    Yep…

    #243133
    dzffafido
    Participant

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

    #245114
    zen92
    Participant

    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

    #249330
    skittleswrapper
    Participant

    Great post.

    #259630
    Nikhil Gowda
    Participant

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

    #269730
    jkesling
    Participant

    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

Viewing 13 posts - 1 through 13 (of 13 total)
  • The forum ‘CSS’ is closed to new topics and replies.