2016/11/08

【Bootstrap専用】画像の上に大きく文字を重ねる方法

CSS PROGRAMMING

完了イメージは上記画像のとおりです。最近の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;
}

以上です。

CSS

• Tweet
• LINE
• Read Later