Gradient using css multiple background

by Bijoy Anupam

HTML

<h1>With inline image</h1>

<div class="background-effect">
    <img src="http://i.ytimg.com/vi/kShTN0Jz6Jg/hqdefault.jpg" />
</div>

<h1>With css background image</h1>

<div class="background-effect image"></div>

CSS

h1 {
    font-size: 30px;
    font-weight: bold;
}
.background-effect {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    width: 480px;
    height: 225px;
    overflow: hidden;
    margin-bottom: 10px;
}
.background-effect.image {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%), url("http://i.ytimg.com/vi/kShTN0Jz6Jg/hqdefault.jpg");
    background-position: 0px 0px, 0px 0px, center;
}
.background-effect img {
    /* To apply gradeint on top of image */
    position: relative;
    z-index: -1;
    /* To center align image */
    top: 50%;
    left: 50%;
    width: 480px;
    height: 360px;
    margin-top: -180px;
    margin-left: -240px;
}