カラムの中にある画像の周りと文章背景を同じカラーで飾りたい

Question

こんにちは。Bootstrapでひとつのカラムを下記のように記述しています。

<div class="col-6 col-md-3 col-lg-3 col-xl-3">
　<div class="product product-7 text-center">
　　<figure class="product-media">
　　　<span class="product-label label-sale">テキスト</span>
　　　　<a href="#" target="_top">
　　　　　<img src="000000001735.jpg" alt="Product image" class="product-image">
　　　　</a>
　　</figure>
　　<div class="product-body">
　　　　　<h3 class="product-title">製品名</h3>
　　　　<div class="product-price">価格</div>
　　　</div>
　</div>
</div>

<div class="product product-7 text-center">の中を黄色で塗つぶしたい（画像が表示されているところはそのままでOKです）のですが、うまくいきません。 イメージとしては、写真の周りが5pxくらいの黄色枠で囲まわており、かつ下の <div class="product-body">の中も黄色で塗りつぶれた状態です。

ちょうど黄色の画用紙の上に写真が乗っかって、余白に製品名と価格が入っている状態です。

<div>を追加してCSSで色を指定しようとしてみましたが、<div class="col-6 col-md-3 col-lg-3 col-xl-3">できれいに並んでレスポンシブになっているところが、表示崩れを起こしてしまいうまくいきませんでした。

ご教授いただければ幸いです。
どうぞよろしくお願い申し上げます。

Comments

[x_x]

色を確認できるよう、CSS も書いてください。

[kei344]

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。

Answer 1

完成形のイメージがよくわからなかったので勘ですが、こちらでいかがでしょうか?

.product {
  background: #ff0;
  padding: 5px;
}

Comments

[dreamliner1977]

こんにちは。ご返信いただきありがとうございます。
設定してみたところ、画像の周りを黄色く縁取ることができました。
商品画像以外のバナーの周りも、色がついてしまったのでclassを変更して、あと色を付けたいところを同じようにしてみたらうまくできました！

お忙しいところ、ご教授いただきありがとうございました。