<div class="bg">
    <p>背景に透過カラー</p>
</div>

html,body{
  height: 100%;
  margin: 0;
}
.bg{
background: url(http://design-levelup.com/wp-content/uploads/2018/09/desk-3139127_1280.jpg);
background-size: cover;
position: relative;
height:100%;
}
.bg::before{
  content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
  background-color: rgba(0,0,0,0.5);
}
p{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family:sans-serif;
  font-size:30px;
  font-weight:bold;
  letter-spacing:5px;
  color:#fff;
}