画像の上にテキストを良い感じで重ねる方法を公開します。
Bootstrap使ってて画像の上にテキストを重ねることできねぇーぜって方はぜひ参考にしてみてください。
初心者向けで自分が見返してもわかるように、簡単に解説も入れてみました。
コードはシンプルです。
コピペして使ってください。
画像
画像はbackground-imageで背景として表示しています。
背景画像の高さを大きくしすぎて、画像が良い感じにならないって方は、background-position：center;を追加してみてください。
画像にテキストを重ねる
また画像にテキストを重ねるために、画像とテキストにdisplayを設定してやります。
画像 → display:table
テキスト → display:table-cell
これだけです。
テキストの位置
テキストを画像の中心（高さ）に持ってきたいので、vertical-align: middle;を設定しています。
下に持ってきたい人は、vertical-align: bottom;で設定すると良い感じになります。
以上です。
〜おすすめ記事〜
TechAcademyは最大手のオンラインプログラミングスクール。コースは24種類と豊富で幅広く学べるのが特徴。完全無料（０円）で１週間無料体験授業が受講可能。無料体験期間中にメンターのオンライン面談を受けるとAmazonギフト券５００円がもらえます。
» 公式サイトを見る
TECH CAMPは転職に特化したプログラミングスクール。転職成功率は９８%で、転職できなければ受講料全額返金の制度あり。無料カウンセリングで受講内容からエンジニア需要まで疑問が全て解決できます。
» 公式サイトを見る
TechBoostはBranding Engineerが運営するオンラインプログラミングスクール。フリーランス案件求人midworksも運営しているので、卒業後の進路が転職、フリーランスと選択肢が多いのが特徴です。無料説明会あり。
» 公式サイトを見る
