I'm trying to apply a clip mask to an image in order to prevent it from overlapping with its background, but I'm not exactly sure how to achieve this. I attempted using the background-clip property with box/padding values, however, it did not produce the desired effect.
Furthermore, my attempt at utilizing the clip: rect(); function seemed ineffective, leading me to wonder if I am executing it incorrectly.
Here is a link to the code snippet on JSFiddle
<div class="paralax">
<div class="fast"></div>
<div class="medium"></div>
<div class="slow"></div>
</div>
.paralax{
width: 100%;
height: 306px;
background: #ccc;
position: relative;
display: block;
clear: both;
}
.fast{
background: url(http://s13.postimg.org/v7rm6cidj/fast.png);
width: 100%;
height: 193px;
}
.medium{
background: url(http://s7.postimg.org/ae6yxfd4b/medium.png);
width: 100%;
height: 510px;
clip: rect(0px, 0px, 100px, 0px);
}