css3 - Gradient overlay on Image with single line of CSS -
i'm trying put gradient on background image using code
background: url('../img/newspaper.jpeg'),linear-gradient(to bottom right,#002f4b, #dc4225); background-size: cover;
i'm getting image gradient not being applied
add gradient first , add image url, this:
background: linear-gradient(rgba(244, 67, 54, 0.95), rgba(33, 150, 243, 0.75), rgba(139, 195, 74, 0.75), rgba(255, 87, 34, 0.95)), url("http://placehold.it/200x200");
or @ snippet below:
.bg { background: linear-gradient( rgba(244, 67, 54, 0.45), rgba(33, 150, 243, 0.25), rgba(139, 195, 74, 0.25), rgba(255, 87, 34, 0.45)), url("http://placehold.it/200x200"); width: 200px; height: 200px; }
<div class="bg"></div>
hope helps!
Comments
Post a Comment