CSS 背景画像の上に文字を表示する方法

対象者

• CSS初心者.

やりたいこと

⇨肉球の画像の上に猫を探すというボタンを配置したいです 現状　

htmlファイル
<%= button_to "猫を探す", { controller: "cats", action: "search" }, { method: :get,class: "btn btn-primary" }  %>
<%= image_tag "background.png" %>

理想

     <div class="background">
         <%= button_to "猫を探す", { controller: "cats", action: "search" }, { 　　　　　method: :get,class: "btn btn-primary" }  %>
     
     </div>
  

コードの解説

理想の方のコードを見るとbuttonの親要素にdivタグを設定しcssを当てている。なぜbuttonタグに直接cssを当てず親要素にcssを適用しているのか？ 例え話をします 犬小屋の中にいる犬の絵を描くことを思い浮かべてください。 犬の毛は黒です。犬小屋の壁が青です。 色を入れるときに犬に黒を犬小屋に青をいれます。考え方としては、これと同じです。 犬の背景（犬小屋の壁）は、犬の外側（親要素）に色をいれます。 ここでいう犬の背景とはclass=backgroundで犬はbutton_toです。