<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);
}