How do you add a linear gradient as a background for an image?

Question

I want to add a certain gradient behind each picture to represent each character, but I can't figure out how
https://code.sololearn.com/WDTwaYmxnuy3/?ref=app

Answer 1

Kyōka (Aiki) see this first image
"
https://code.sololearn.com/WP96YDSBZMLD/?ref=app

Answer 2

// Kyōka (Aiki) linear gradient is active behind your image's , only image is overlapping it, give that background to image Container

Answer 3

// Kyōka (Aiki) you applied image background linear gradient
.JIROU {background-image:linear-gradient(purple, black);}

but as images loads linear background will be covered by image , so you can give a linear gradient to image Container , means place image inside div and give background to that div

Answer 4

Try to set img with opacity selector, and set div with img width.

https://code.sololearn.com/W3jW7g006La7/?ref=app

Answer 5

Sudarshan Rai 👑 What do you mean by that? Sorry, I just am confused by how you said that.