画像の上にテキストを良い感じで重ねる方法を公開します。
Bootstrap使ってて画像の上にテキストを重ねることできねぇーぜって方はぜひ参考にしてみてください。
初心者向けで自分が見返してもわかるように、簡単に解説も入れてみました。
コードはシンプルです。
コピペして使ってください。
画像
画像はbackground-imageで背景として表示しています。
背景画像の高さを大きくしすぎて、画像が良い感じにならないって方は、background-position：center;を追加してみてください。
画像にテキストを重ねる
また画像にテキストを重ねるために、画像とテキストにdisplayを設定してやります。
画像 → display:table
テキスト → display:table-cell
これだけです。
テキストの位置
テキストを画像の中心（高さ）に持ってきたいので、vertical-align: middle;を設定しています。
下に持ってきたい人は、vertical-align: bottom;で設定すると良い感じになります。
以上です。
〜おすすめ記事〜
[kanren postid=”2040″]
[kanren postid=”960″]
[kanren postid=”3768″]