0

I have two divs, one a full screen background image, the other a bar with markup like so.

<div class="home">
    <div class="home-bar">
    </div>
</div>

I'm attempting to make the home.bar class have an blend effect of screen and I'm attempting to do this like so

.home{
    position:absolute;
    z-index:-99;
    bottom:70px;
    width:100%;
    height:100%;
    min-height:100%;
    max-height:100%;
    background-color: transparent;
    background-image:url('img/home-hero.jpg');
    background-repeat: no-repeat;
    background-position:center center;
    background-size:cover;
}

.home-bar{
    position:absolute;
    height:150px;
    width:100%;
    bottom:20px;
    background-color:red;
    background-blend-mode: screen;
}

However I am unable to get the desired effect. How do I get .home-bar to screen over the top of .home?

  • @Zaqx Yep, I'm currently testing in Chrome 40 –  Mar 03 '15 at 01:52
  • 1
    background-blend-mode applies to backgrounds in the same element. The property that you want is mix-blend-mode (still experimental in Chrome) – vals Mar 08 '15 at 16:59

0 Answers0