backgroung-imgが表示されない

Question

画像のように、マステ風の画像の上に文字を重ねたいのですが
backgroung-imgが表示されません。

      <ul class="cats-list">
        <li class="cats-item">
          <a href="#">
            <div class="cats-list-img"><img src="./img/cat_fv01.png"></div>
            <p class="cats-list-text cats1">まるお</p>
          </a>
        </li> 
        <li class="cats-item">
          <a href="#">
            <div class="cats-list-img"><img src="./img/cat_fv02.png"></div>
            <p class="cats-list-text cats2">みみこ</p>
          </a>
        </li> 
        <li class="cats-item">
          <a href="#">
            <div class="cats-list-img"><img src="./img/cat_fv03.png"></div>
            <p class="cats-list-text cats3">ゆき</p>
          </a>
        </li> 
      </ul>

.cats-list{
  max-width: 1000px;
  margin: 0 auto 80px;
  padding: 0 50px;
  display: flex;
  justify-content: space-between;
}
.cats-item{
  width: 32%;
  background-color: #fff;
}
.cats-item a{
  color: #141414;
  text-decoration: none;
}
.cats-list-text{
  padding: 25px 20px;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
}
.cats-list-text cats1{
  background-image: url(../img/maruo.png);
}

F12押してエラーは出てきません。
.cats-list-text cats1{
background-image: url(../img/maruo.png);
}

で、backgroung-imgを設定しているのですが。。。

よろしくお願いいたします。

Answer 1

<p class="cats-list-text cats1">

.cats-list-text cats1{
  background-image: url(../img/maruo.png);
}

とありますが、このclassの意味を勘違いされているようですね^^;

class名としてスペースは使えません。
class名にスペースを使うのは、別の意味になります

###class名 のスペースとは

<p class="cats-list-textスペースcats1">

となっている場合

.cats-list-text { 何かのスタイル }
.cats1 { 何かのスタイル }

「この２種類のclassを重ね掛けする」
という意味になります

またcssで

.cats-list-textスペースcats1{
  background-image: url(../img/maruo.png);
}

と書かれた場合は
.cats-list-text の子要素の cats1(' . ' が無いのでclassにもなりませんが、、、)
にスタイルをかける、という意味です。

.cats1 にスタイルをかけたいのでしたら

.cats1{
  background-image: url(../img/maruo.png);
}

にすればOKです^^