CODEWITHSUNDEEP
htmlcss
The Dead Man
The Dead Man

Reputation: 5566

Linear gradient combined with image background not displaying

I have a section which I have added a linear gradient as background plus image , unfortunately only linear gradient is displaying no image is displayed .

I have used all solution in stackoverflow but nothing worked.

Here is my code:

.newslater {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: linear-gradient( 51deg, rgb(203, 0, 53) 0%, rgb(224, 105, 0) 100%), url("https://thumb.ibb.co/ekYLtp/Content_bottom.png") no-repeat fixed;
  background-size: cover;
  width: 100%;
  height: 489px;
}
<section class="newslater">

</section>

Here is jsfiddle: http://jsfiddle.net/n7dofak9/1/

I am strugling to solve this problem :( , what am I doing wrong in my code? please help

Upvotes: 0

Views: 62

Answers (2)

Kenal
Kenal

Reputation: 46

The solution to this is simple, your mistake is that you're using RGB(), what you should be using is RGBA() which allows you to add transparency to your gradient, when you use RGB() for your gradient, you get a solid gradient, therefore the gradient will cover the image you're trying to input!

*Note: RGBA(x,x,x,y) the y value (representing transparency) can only take in values from 0-1 in decimal points, with 1 being solid and 0 being entirely transparent, if you want the gradient to be lighter, go lower, if you want the gradient to be darker, go higher.

Let me know if you have any issues!

Do upvote me!

Corrected code:

.newslater {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient( 51deg, rgb(203,0,53, 0.5) 0%, rgb(224,105,0, 0.5) 
100%), url("https://thumb.ibb.co/ekYLtp/Content_bottom.png");
background-size: cover;
width: 100%;
height: 489px;
}

Upvotes: 3

Veysel BAYAR
Veysel BAYAR

Reputation: 261

http://jsfiddle.net/n7dofak9/3/

.newslater {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-image: 
linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), url('https://image.shutterstock.com/image-vector/colorful-circles-walpaper-3d-seamless-260nw-306246791.jpg');
background-size: cover;
width: 100%;
height: 489px;

}

You can look at this address. Would you try that?

Upvotes: -1

Related Questions