画像を横並びにリピートさせたいのですが、表示すらされません。

Question

こちにリピートさせて
下記画像のドットを作りたいのですが、表示すらせれません。

  <div class="p-main__news">
    <div class="p-main__inner">
      <div class="p-main__slider">
        <img src="./img/k_5.jpg" class="p-main__news__picture" alt="main__news">
      </div>
    <div class="p-main__new__box">NEW </div>
    <div class="p-main__slide">
      <input type="radio" class="c-slidebox" name="gal">
      <input type="radio" class="c-slidebox" name="gal">
       <input type="radio" class="c-slidebox" name="gal">
       <input type="radio" class="c-slidebox" name="gal">
        <input type="radio" class="c-slidebox" name="gal">
        <input type="radio" class="c-slidebox" name="gal">
         <input type="radio" class="c-slidebox" name="gal">
         <input type="radio" class="c-slidebox" name="gal">
          <input type="radio" class="c-slidebox" name="gal">
    </div>
    </div>
  </div>

p-main__news{
 position: relative;
}

.p-main__inner{
  background: url(../img/dodded.png) repeat;
}

.p-main__news__picture{
  height: 100%;
  width: 100%;
}

.p-main__slider{
}

.p-main__new__box{
  width: 40px;
  height: 40px;
  background-color: red;
  color: white;
  font-weight: bold;
  display: flex;
  align-items: center;
  padding: 5px;
  position: absolute;
  top: 0;
  left: 0;
}

.p-main__slide{
 text-align: center;
border-bottom: solid 2px #d3d3d3;
background-color: #fff;
margin-top: 25px;
}

.c-slidebox{
  margin: 25px 0 20px 8px;
}

.c-slidebox:first-child{
  margin-left: 0;
}

Comments

[dit.]

CSSから見た画像のパスは間違っていませんか？
画像ファイル名は間違っていませんか？（dodded→dottedとか）

Answer 1

l-main__newsに高さは指定しているでしょうか？
高さを指定していないと、親要素の高さは子要素がちょうど収まるように確保されます。

例えば、親要素の高さが500pxで２つの子要素の高さが合わせて300pxならば、
親要素の縦方向に200pxの余白が生じます。この余白に背景が表示されます。
もちろん子要素が透けているならば、そこにも背景が写ります。

もし、p-main__new__boxにabsoluteが指定されているならば、
その高さは親要素に含まれなくなるので、p-main__news__pictureの高さだけが親要素の高さになります。
ですので、p-main__news__pictureの高さよりもl-main__newsを高く設定する必要があります。

Comments

[kkkhiroki]

指定してみましたが、できませんでした。

[NAOPI-05]

その際に `background` に `repeat-x` ではなく `repeat` を設定されましたか？

[kkkhiroki]

repeat-xを指定しました。
上記でいただいた回答が高さなどの設定の話ですが、サイズをどう変えてどこに当てればいいのかが具体的にわからない状態です。
今はl-main__newsというところに背景画像を設定しているので、親要素やこ要素というのがピンと来ていなく混乱しています。
すみません。。

[NAOPI-05]

今回の場合、親要素は `l-main__news` に当たります。子要素はその中の `p-main__news__picture` と `p-main__new__box` です。親要素や子要素というのは階層構造においての話です。要素Aの中に要素Bがあれば親要素はAで子要素はBになります。これはあくまで相対的に見ての話ですので、子要素の中に要素CがあればCから見てBは親要素に当たります。
ちなみに、`repeat` にすることで要素全体に背景が表示されます。