opacity of whole page changing instead of background image

hey folks I have a div with the following css

.firstBackground{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url(../public/lakshay_background.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.firstBackground{
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: url(../public/lakshay_background.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

but when I add opacity: 0.5; in the above code opacity of whole page changes instead of the background-image is there anyway by which I can change the opacity of only background-image

1 Reply

MarkBoots•2y ago

this class is set on the body? Then the whole body will get the opacity if you only want to effect the background, you can put it in a before/after pseudo element of the body so it will only affect that for example

body {   
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed; 
  inset: 0;
  background: url(../public/lakshay_background) center / cover;  
  opacity: 0.5;  
  z-index: -1;
}

body {   
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
body::before {
  content: "";
  position: fixed; 
  inset: 0;
  background: url(../public/lakshay_background) center / cover;  
  opacity: 0.5;  
  z-index: -1;
}

other option is to not use opacity, but using a stacked background with a translucent layer on top, so the image "seems" to have an transparancy like

body {   
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  --overlay-color: hsl(0 0% 100% / .5); /* white 50% opacity*/
  background: 
    linear-gradient(var(--overlay-color), var(--overlay-color)),
    url(../public/lakshay_background) center / cover fixed;   
}

body {   
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  --overlay-color: hsl(0 0% 100% / .5); /* white 50% opacity*/
  background: 
    linear-gradient(var(--overlay-color), var(--overlay-color)),
    url(../public/lakshay_background) center / cover fixed;   
}

Gaming

Programming

opacity of whole page changing instead of background image