0

I want to use image as background in my website and want to change its opacity but when I does that instead of image other elements opacity gets reduce.

currently I am using image as background through CSS in the body part but, by doing this I am unable to reduce its opacity. when I try to use it image as background into the other part of the html it isn't working.

body{
    background-image: url('images/wallpaper.jpg');
    background-repeat: no-repeat;
    height: 100vh;
    width: 100vw;
    background-size: cover;
}

how should I reduce the opacity....opacity: 0.3; is not working for me. as its reducing the html opacity.

Brahm Jagota
  • 29
  • 5
  • If it is your aim just to 'lighten', 'faint' or 'bleach' your image you should investigate CSS property `body { background-blend-mode: screen }`. Set your `background-color` to a light shade of pure grey between 50-100% (where 50% = medium grey, 100% = white) and use your image as before. The lighter the background color, the fainter your image. This is not the same as `opacity`, just *painting* with light. Blend mode `multiply` is the opposite, use greys between black (0%) and medium grey (50%) instead to darken and image. Using a `hsl(..)` color is the easiest to accomplish this. – Rene van der Lende Mar 10 '23 at 15:31

0 Answers0