【CSS】背景画像に入っているテキストを非表示にする方法とは？

　CSSで背景画像を表示させる際、テキストを消したい…という場合があります。

以前はtext-indent: -9999pxでテキストをブラウザ上で見えなくなるまで移動させる…という手法が主流でしたが、この方法は近年ではSEO的にあまりよくないとされています…。

そこで今回はtext-indent: -9999pxを使わずとも背景画像に入っているテキストを非表示にする方法について紹介していきます！

背景画像に入っているテキストを非表示にするには？

　まず、以下のようにHTMLを設定したとします。

<div class="star">
	星
</div>

その上で背景画像を表示させるには、以下のようなCSSを設定します。

.star {
	background: url(star-bg.png) no-repeat;
	background-size: 100%;
	box-sizing: border-box;
	color: #fff;
	height: 297px;
	width: 446px;
}

以上の設定をすることで以下のように背景画像が表示されるようになります。

ただし、上の見本を見てもわかるように現状では“星”というテキストが表示されたままになっています。

ここで、“星”というテキストを非表示にしたい！という場合には以下のCSSを追記してあげましょう。

overflow: hidden;
text-indent: 100%;
white-space: nowrap;

上記を追記して、以下のようにCSSを設定します。

.star {
	background: url(star-bg.png) no-repeat;
	background-size: 100%;
	box-sizing: border-box;
	color: #fff;
	height: 297px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	width: 446px;
}

上のようにCSSを設定することで、以下のようにテキストが非表示になります！

まとめ

　以上が背景画像に入っているテキストを非表示にする方法でした！

CSSで追記設定をするだけでテキストが非表示になるので、手軽にできることなので是非ともご活用ください！