css 背景画像だけ暗くする

background-imageを使用してテキストを表示する場合、
画像の色とテキスト色がかぶってしまい見難いので画像のみ暗くする方法を
記載する。

HTML

<div class="background">
  <div class="text">
    <h1>WHITE</h1>
  </div>
</div>

CSS

.background{
	background: url(任意の画像パス) no-repeat center;
	background-size: cover;
	position: relative;
	height:100vh;/* 要注意！！中身の要素を浮かせるため、
　　　　　heightを指定しておかなければbackground-imageは
　　　　　表示されない！！ */
}
.background::before{
	/* 透過した黒を重ねる */
	background-color: rgba(0,0,0,0.5);
	/* 重ねる範囲を指定 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	content: ' ';
}
.text{
  position: absolute;
  width: 100%;
  text-align: center;
}
h1{
  color: white;
}

class="text"をposition:absoliute;で浮かせる
(浮かせないとbackground-color: rgba(0,0,0,0.5);の影響を
受けることになる。)
以上のことから、
空っぽになるclass="background"は高さを指定しておかないと
表示するものがないので、background-imageも表示されない！
なんで表示されないのかずっと悩んでいた。