Does CSS background-blend-mode property work in SOLOLEARN?

Question

I have been trying to use the CSS background-blend-mode property on SoloLearn, but it is not working and SoloLearn says that it is an "Unknown Property". I think I have what it is needed to use this property well: a background-image and a background-color (black). My intention was to use a value "multiply" on this property, but no value is been recognized by SoloLearn.

See down below how I'm using these properties on CCS and let me know what you guys think:

.header {

color:black;

text-shadow:1px 1px 1px white;

background-image:url(https://www.tcc.fl.edu/media/divisions/training-group/international-services/Signing_form.jpg);

background-size:cover;

background-blend-mode: multiply;

padding:2px;

margin:3px;

font-family:"verdana";

text-align:center;

font-weight:bold;

border-color: rgb(150, 150, 150);

border-style:ridge;
}

Thank you so much!

Answer 1

Your device might not support it, that’s the problem. All CSS properties would be supported on SoloLearn.

Answer 2

Hmm, it says that it doesn’t exist, but it does. Just a mistake in the IDE/syntax highlighter.

Answer 3

https://code.sololearn.com/WYHYv0Uq4V9x/?ref=app
Try checking this code from kelvin👌👌👌

Answer 4

You don't have an extra background color or image layer for background-blend-mide to work.

Add an extra background would make it works. Check out this sample.

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

And please note that background color black or white would not work well in multiple blend mood, use grey or other colors instead.

Answer 5

It's optional, url() link could be with or without quotes.

Answer 6

Hey, Rowsey. Thanks for your comment!

I’m not sure if that’s the problem, for two reasons:
1) SoloLearn website says that the “background-blend-mode” property is an “unknown property”,
2) also I tested the same code on other IDE’s and it worked just as I intended.

I don’t know if the browser has anything to do with it, but at the same time I don’t think so.

it’s weird!

Answer 7

Calvin, thank you very much for your comment.

You are completely right. I forgot to put the background-color and that's why it wasn't rendering the way I wanted. In my mind, I had written the background code and it was all set. I just started learning a little css and I'm still a little lost.

You are also right about the problem I'll have if I let background-color black.
I used "background-color: rgba (0, 0, 0, .6);" and it worked as I intended.

Thank you guys for the help!

Answer 8

The above syntax background-image url is wrong remember in the url() the link is follow by a quote url(/*link*/); regarding the background-blend-mide the IDE will not recognize because because you do not have a extra image layer for it to work

Answer 9

The above syntax background-image url is wrong remember in the url() the link is follow by a quote url(/*link*/); regarding the background-blend-mide the IDE will not recognize because because you do not have a extra image layer for it to work

Answer 10

George, you are totally right! Even though it is working now without the quotes, the link is supposed to have quotation marks.

Thank you!