Error: CSS: background: / is an incorrect operator

Question

I have the following HTML:

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

  <head>
    <title>test</title>

  </head>

  <body>
    <div style="height:100%;background: url('https://apprecs.org/ios/images/app-icons/256/90/1097333136.jpg') 100% 0 no-repeat / 4%;">
      <p>
      bob
      Is
      The 
      best!

      </p>

    </div>
  </body>

</html>

The image displays well but when I go to the HTML validator I get an error:

Error: CSS: background: / is an incorrect operator.

If I remove that / then the image doesn't appear. What is the correct way?

score 3 · Accepted Answer · answered Jan 05 '19 at 19:33

If we refer to the formal syntax:

The / is the separation between background-position and background-size (this one being optional) so the correct syntax is:

 background: url(...) 100% 0/4% no-repeat;

Where background-position:100% 0 and background-size:4%

Note that background-size should always be specified with background-position when using shorthand syntax. You cannot specify the size without position but you can specify position without size:

 background: url(...) 100% 0 no-repeat;

Relatad question: Issues with "background-position" in "background" shorthand property

Error: CSS: background: / is an incorrect operator

1 Answers1

Linked

Related