Gradient Overlay with Background Image [duplicate] - html

Question

I'm trying to put a gradient on a background image using this code
background: url('../img/newspaper.jpeg'),linear-gradient(to bottom right,#002f4b, #dc4225);
background-size: cover;
I'm getting the image but the gradient is not being applied

Answer 1

Add the gradient first and then add the image url, just like 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 look at the 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 this helps!

Answer 2

div {
width: 350px;
height: 350px;
background: linear-gradient(to bottom right, rgba(0,47,75,.9), rgba(220,66,37,.9)), url(http://placehold.it/350x350);
background-size: cover;
}
<div></div>

Answer 3

do it in one line like below, I gave an example for that, see it
background-image: linear-gradient(to start-direction end-direction, color1, color2, url("imageUrl");
#hero {
height: 320px;
width: 100%;
background-image: linear-gradient(to right bottom, rgba(99, 102, 241, .9), rgba(219, 99, 139, .9)), url("https://i.picsum.photos/id/305/600/300.webp?hmac=QcFzy6dHM3Qs5MQwTjvnHEkSoTGAfg_VRgbH5g7pUQM");
background-size: cover;
}
<div id="hero"></div>