【Bootstrap専用】画像の上に大きく文字を重ねる方法
完了イメージは上記画像のとおりです。最近のWebサイトに多いやつですね。実際に実装しているサイトは、Book That Changed Your Lifeとなります。
今回の方法はBootstrap専用なので、Bootstrap使ってないよって人は【5秒で完了】画像(イメージ)上に半透明の文字を重ねる方法【CSS】をご覧ください。
完成コード
jsfiddleに入れときました。.cover-img
のheight
部分だけ環境に合わせて調整してください。PC・タブレット・スマホで条件分岐するようになっています。
HTMLコード(コピペ用)
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 cover-img" style="background-image:url('https://manablog.org/wp-content/uploads/2016/11/top-img.jpg');">
<div class="cover-text text-center">
<p style="color: #fff;">ここがテキストですよ!!</p>
</div>
</div>
</div>
</div>
CSSコード(コピペ用)
.cover-img {
height: 600px;
display: table;
width: 100%;
background-size: cover;
}
/* ワイドスクリーン用のCSS */
@media only screen and (min-width: 1500px) {
.cover-img {
height: 800px;
}
}
/* タブレット用のCSS */
@media only screen and (min-width : 768px) and (max-width : 1200px) {
.cover-img {
height: 500px;
}
}
/* スマホ用のCSS */
@media only screen and (max-width: 479px) {
.cover-img {
height: 300px;
}
}
.cover-text {
display: table-cell;
vertical-align: middle;
text-align: center;
}
以上です。