Linear gradient is not working with background image-CodePudding

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
.body{
    font-family: "Lato" sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.7;
    color:#777;

}
.header{
    height: 95vh;
    background-image: linear-gradient(#e66464b9, #9198e5be) url(../img/back.jpg);
    background-size: cover;
    background-position: top;
}

the background image works alone, but when i add linear gradient it turns to white

CodePudding user response：

You have to use either linear-gradient or image url. You can't use both same time.

background-image: linear-gradient(#e66464b9, #9198e5be) // url(../img/back.jpg);

If you want both you can use

background: linear-gradient(#e66464b9, #9198e5be) url(../img/back.jpg);

CodePudding user response：

Use simple background without -image in the CSS, and it will work. Like so:

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
.body{
    font-family: "Lato" sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.7;
    color:#777;

}
.header{
    height: 95vh;
    background: linear-gradient(#e66464b9, #9198e5be) url(../img/back.jpg);
    background-size: cover;
    background-position: top;
}