CSS gradient on a background image

Question

I'm trying to add a gradient to a background image, so the gradient is coming from top and from the bottom, exactly like this - https://prnt.sc/qjqng6
The background image code -

body {
  background-image: url('images/city.jpg');
  background-position: top;
  background-size: cover;
  height: 900px;
  margin: 0px;
}

I've tried adding the gradient, but I've only succeeded to add a gradient from bottom to top only.
I would appreciate if someone could help me with the code and explain how it works.

Try the accepted solution here: https://stackoverflow.com/questions/16589519/use-css-gradient-over-background-image — Nathaniel Flick, Jan 05 '20 at 20:40

score 0 · Answer 1 · answered Jan 05 '20 at 20:41

0

Maybe try this:

//Adapt the colors
.body {
  background: linear-gradient(to top, #6C2D72, #A53A6F);
}

answered Jan 05 '20 at 20:41

auenal

139
3
11

How do I turn the opacity of the gradient down? It's just solid. – Cubex Jan 05 '20 at 20:44

score 0 · Answer 2 · answered Jan 05 '20 at 20:46

CSS:

.gradient-bg{
    display: inline-block;
    background: -moz-linear-gradient(bottom, rgba(0,0,0,0) 0%, rgba(249, 249, 249, 0.89) 100%);
    background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
    background: -o-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
    background: -ms-linear-gradient(bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(249, 249, 249, 0.89) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );

}
span{
  position: absolute;
  top: 183px;
}
img{
  position:relative;
  z-index:-1;
  display:block;
  height:200px; width:auto;
}

HTML :

<div class="gradient-bg">
  <img src="https://i.stack.imgur.com/bDGCn.png">
  <span>Your Text Here</span>
</div>

That seems to add only a gradient from the bottom till the middle. — Cubex, Jan 05 '20 at 20:58

score 0 · Answer 3 · answered Jan 05 '20 at 21:00

Try this.

body {
    background-image: linear-gradient(to top, rgba(241, 110, 110, 0.64), rgba(247, 102, 211, 0.35)),url(https://images.unsplash.com/photo-1578109520926-27e174c2b776?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=282&q=80);
    background-size: cover;
    background-repeat: no-repeat;
    height: 900px;
}

<body>
 
</body>

CSS gradient on a background image

3 Answers3