White strip over an image? - css

Question

So i have a background image, i need to put an horizontal white strip over this background image, in order to put a title into the strip. I know how to make boxes over an image on CSS but i'm having an hard time making this strip, it must not be a box, it has to cover the whole background image from the left margin to the right margin of the image, any idea?
Here is the piece of code involved:
.title-image {
position: fixed;
height: 230px;
margin-top: -16px;
margin-left: -20px;
}
h1 {
background: white;
position: absolute;
font-family: Play;
color: #c76161;
}
<div class="title">
<img class="title-image" src="" alt="">
<h1>Title</h1>
</div>

Answer 1

You can simply use multiple background like this:
.box {
width:200px;
height:200px;
line-height:200px;
font-size:20px;
text-align:center;
background:
linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8))0 50%/100% 80px no-repeat,
url(https://lorempixel.com/200/200/);
}
<div class="box">
some text
</div>

Answer 2

Use flexboxes and background images
body{
margin: 0;
padding: 0;
}
.image{
width: 250px;
height: 250px;
background-color: red;
display: flex;
align-items: center;
}
.title_container{
width: 250px;
background-color: green;
text-align: center;
}
<div class="image"><div class="title_container"><h1 class="title">Test</h1></div></div>
Replace background-color: red; by background-image: url("yourimage.png");