Is there a way to add background properties using CSS to a gradient with an image as background?-CodePudding

I have CSS which I am adding a gradient to an Image. It is adding the gradient successfully but the background Image is repeating. I want to set it to cover the whole body and center it and have a no-repeat properties. How can I achieve this? I tried adding no repeat after the URL but it is taking no effects. Below is my code;

    <style>
    body {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("images/dms.jpg");
    }
</style>

I want to achieve something like the below code. I have the Image as a background which is not repeating and is centered.

    <style>
    body {
        background-image: url("images/dms.jpg");
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }
</style>

CodePudding user response：

To make the body gradient, you should either set the height or you should Set the background-attachment property to fixed

solution 1 :

    body {
        min-height:100vh;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 
        1)), url("images/dms.jpg");
    }

solution 2 :

    body {
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 
        1)), url("images/dms.jpg");
        background-attachment: fixed;
    }

CodePudding user response：

I solved it by adding the !important CSS rule to the backgound properties while still using the gradient like below;

body {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)), url("/images/dms.jpg");
}

Another way is to target the specific element and increase or decrease the opacity but you will have less control.