Search code examples
cssbackground-image

Add opacity to one of the many background images

I have this CSS style:

.Right-Side-BG {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url(./white.svg), linear-gradient(to bottom, #598bd7, 
    #165594);
}

I need svg image to have 0.21 opacity, how do I do that?

Solution

  • You might need another way to solve it. You can make the whole element (e.g. the div containing the image) transparent using for example:

    opacity: 0.5;

    If you can make sure that your other content is not in this div but in other elements this will work. There is no "opacity"-effect that only applies to background images.