How do you put Opacity on Background Image

Question

Hi guys. So I have this cool background image, but I want to make it more transparent. Is there a way to do this?
https://code.sololearn.com/WaBPX0MgnEkc/?ref=app

Answer 1

Try this using the original image:

// For opacity with white backgound
background-image: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url(" https://s-media-cache-ak0.pinimg.com/736x/08/37/b4/0837b42617824555d198e9d949d32c6d--friut-summer-fruits.jpg ");

/" For opacity with black background
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(" https://s-media-cache-ak0.pinimg.com/736x/08/37/b4/0837b42617824555d198e9d949d32c6d--friut-summer-fruits.jpg ");

Answer 2

here you go, just ask if you don't understand it

https://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity

Answer 3

@kamil Thank you. Is there anyway you could actually put that in a code playground code for me to see?

Answer 4

@calvin Thank you so much. I have it working and on another project as well.