image画像の上下に背景画像の設定方法

Question

背景画像の設定方法を教えて欲しいです。
空divになってしまうわないように背景画像で設定しようと考えています。

この画像を使って
下の画像の上下部分のドットを表現させたいです。

    <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>

Comments

[kei344]

https://teratail.com/questions/222286 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。 https://teratail.com/help#delete-question https://teratail.com/contact/input

Answer 1

画像が雑なので別の画像で代用させて頂きました。あと、ドットの絵を並べるよりドットを書くかもっと大きい画像で代用した方がいいと思います。

<style>
.relative {
    position: relative;
}
.absolute {
    position: absolute;
    left: 10px;
    top: 10px;
}
</style>
<div class="relative">
<img src="https://lh3.googleusercontent.com/Gt3Y6vLTaHrDszSBOdaSX5LCkg2Cwo6oQ569V5rrs6Vw4vJV8mGBufd-SLhCmMn8KNWAQcCDRk8Hyr_3D6uh9jdvZhcQdZzTmKpCNQ=w760-h380" />

<img src="https://lh3.googleusercontent.com/EWZvifAYMFXxRwxWa1GjXt8NrDPY39ndSav5oXHs91H5h2gPWi_lPxf3yKNXhZQCXoTGIav6nsu11iOIZ5aFSVW8MZkbPOCX5Eip=w760-h380" class="absolute"  />

</div>

例えば画像を重ねてみました。あと、結局何が聞きたかったんですか。