【Rails7】背景画像の上に文字を置く

【Rails7】背景画像の上に文字を置く

結論

1. background-imageをcssで設定する
2. background-imageを親要素として、その子要素に文字を置く
3. 表示すると背景画像の上に文字が入る

# home.html.erb
<div class=”background-image”>
<div class=”h1″>タイトル</div>
</div>

# stylesheets/application.scss
.background-image{
background-image: image-url(‘top.png’) # asettsのimageに画像がはいっていないと使えないです
background-size: cover;
}

ちょっとソースがうまく載せられなかったので、こんな感じになりました。

以上です。