Difficulty working with CSS background-image property in tables

Curriculum Help
,
1

Context

i am trying to complete the build a book inventory app exercise but the requirement that i keep failing is Q26:

You should use an attribute selector to target rows that have the class of read and set their background-image property to a linear gradient of your choice.

i cant figure out why i am unable to set the background-image. ive tried running some experiments to see if there is an issue with my selector by setting other properties like background-color: green which seems to work and after reading documentation for half an hour on background-image and linear-gradient() i still don’t understand and cannot figure out what i am doing wrong :cry:

link to Build a Book Inventory App

My CSS

tr[class="read"] {
  background-image: linear-gradient(hsl(120, 50, 70),hsl(120, 50, 30));
}

My HTML

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

<head>
  <meta charset="utf-8">
  <title>Book Inventory</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <h1>Book Inventory</h1>
  <table>
    <thead>
      <tr>
        <th>Title</th>
        <th>Author</th>
        <th>Category</th>
        <th>Status</th>
        <th>Rate</th>
      </tr>
    </thead>
    <tbody>
      <tr class="read">
        <td>asterios polyp</td>
        <td>david mazzucchelli</td>
        <td>graphic novel</td>
        <td><span class="status">Read</span></td>
        <td>
          <span class="rate three">
            <span></span><span></span><span></span>
          </span>
        </td>
      </tr>
      <tr class="to-read">
        <td>kingdom of fantasy</td>
        <td>geronimo stilton</td>
        <td>novel</td>
        <td><span class="status">To Read</span></td>
        <td>
          <span class="rate">
            <span></span><span></span><span></span>
          </span>
        </td>
      </tr>
      <tr class="in-progress">
        <td>meredith's biography</td>
        <td>mere notilde</td>
        <td>biography</td>
        <td><span class="status">In Progress</span></td>
        <td>
          <span class="rate">
            <span></span><span></span><span></span>
          </span>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

My browser info

Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0
2

Hey @loong.yithng

Please go through What Is the HSL Color Model, and How Does the HSL Function Work in CSS? once again and check how saturation and lightness is measured.

3

ah i see i forgot that saturation and lightness is measured in percentage which is why it didn’t work. for the longest time i saw the little colored square pop up in the left and assumed it was working. thanks so much!