background image overlay with text not even giving the background-image-CodePudding

I tried to get a linear gradient on my background from top to bottom but the background image which I was getting originally now disappeared. However if I used the normal background-image property I was getting my image properly.

    background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9),url(bg.jpg));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;

It should give the proper background without a gradient but instead the image disappeared. Somebody pls help!

CodePudding user response：

Use opacity:0.1; I hope this will fix your problem

CodePudding user response：

You the following syntax:-

 background: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9),url(bg.jpg));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    opacity:0.1;

CodePudding user response：

Please try this. It will work properly.

background-image: linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.9)),url(bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    height: 100vh;
    opacity:0.5;

CodePudding user response：

check this one.

.main { 
  
  background: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
    background-image: linear-gradient(166deg, rgba(0,0,0,0.6),rgb(17 29 251 / 90%)),url(https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 100vh;
}

<div > </div>