How to put linear gradient right after background image?

Question

Is there a way to put an image as a background with cover size and then right after the image to put a gradient? It will create something like fading. I tried something like this but it doesn't work.

body { 
  height: 100vh;
  background: url('./images/bg.jpg') no-repeat, linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%); 
}

@0stone0 http://prntscr.com/uw3xj9 Something like this. You see how it starts with an image and then right after the image there is the gradient — Cloudy Skies, Oct 09 '20 at 11:55

score 1 · Accepted Answer · answered Oct 09 '20 at 12:10

Cover is going to stretch your image to "cover" the background, so you'd never see the gradient anyway, which is also a background image. You could set the gradient as the body's background then using a container DIV with the image background.

CSS:

#container{
  height: 100vh;
  background: url('https://static.vecteezy.com/system/resources/thumbnails/000/299/953/small/y2ok_2cif_180815.jpg') no-repeat;}

body {
  background-image: linear-gradient(180deg, rgba(23,26,25,1) 0%, rgba(0,0,0,1) 100%); 
}

Page:

<div id="container">

    // put page code in here like it was body

</div>

How to put linear gradient right after background image?

1 Answers1