Repeating Linear Gradient Not Working

HTML-CSS
#1

I can’t understand where I am going wrong.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Repeating Linear Gradients</title>
    <style>
        div {
            width: 500px;
            height: 300px;
            border: 4px solid black;
            margin: auto;
            repeating-linear-gradient(-45deg, black 0px, green 50px, red 40px, yellow 110px, blue 100);
           
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>
<!--   -->
#2

Should be:

div{
background-image: repeating-linear-gradient();
}

Also is blue 100, % or px?

#3

Thanks for catching those errors for me. Yes, of course, in keeping with the other units, the blue should have had 100px associated with it. Totally forgot to add the px🙃
In the same vein, I thought it was sufficient to go only with
repeating-linear-gradient()
I didn’t realize you needed the
background-image:
preceding it. So thanks for pointing all that out. One final question though - there isn’t any difference between
bacground-image: and background: only - is there? Both seem to work just fine.