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

Popular posts from this blog

java - SSE Emitter : Manage timeouts and complete() -

jquery - uncaught exception: DataTables Editor - remote hosting of code not allowed -

java - How to resolve error - package com.squareup.okhttp3 doesn't exist? -