画像にテキストを重ねる方法【コード公開】

画像の上にテキストを良い感じで重ねる方法を公開します。

Bootstrap使ってて画像の上にテキストを重ねることできねぇーぜって方はぜひ参考にしてみてください。

初心者向けで自分が見返してもわかるように、簡単に解説も入れてみました。

コードはシンプルです。
コピペして使ってください。

画像

画像はbackground-imageで背景として表示しています。
背景画像の高さを大きくしすぎて、画像が良い感じにならないって方は、background-position:center;を追加してみてください。

画像にテキストを重ねる

また画像にテキストを重ねるために、画像とテキストにdisplayを設定してやります。
画像 → display:table
テキスト → display:table-cell

これだけです。

テキストの位置

テキストを画像の中心(高さ)に持ってきたいので、vertical-align: middle;を設定しています。

下に持ってきたい人は、vertical-align: bottom;で設定すると良い感じになります。

以上です。

〜おすすめ記事〜

【フリーランス向け】HTML、CSSスキルを身につけてコーディング案件を受注する方法【月5万稼ぐ】

2018.04.07

【フリーランス初心者】プログラミング勉強開始2ヶ月で10万円稼ぐノウハウ公開します【実体験】

2018.01.02
テックアカデミーのロゴ

TechAcademyは最大手のオンラインプログラミングスクール。コースは24種類と豊富で幅広く学べるのが特徴。完全無料(0円)で1週間無料体験授業が受講可能。無料体験期間中にメンターのオンライン面談を受けるとAmazonギフト券500円がもらえます。

» 公式サイトを見る
TECHEXPERTのロゴ

TECH CAMPは転職に特化したプログラミングスクール。転職成功率は98%で、転職できなければ受講料全額返金の制度あり。無料カウンセリングで受講内容からエンジニア需要まで疑問が全て解決できます。

» 公式サイトを見る
TechBoostのロゴ

TechBoostはBranding Engineerが運営するオンラインプログラミングスクール。フリーランス案件求人midworksも運営しているので、卒業後の進路が転職、フリーランスと選択肢が多いのが特徴です。無料説明会あり。

» 公式サイトを見る