How to make a block on top of an image responsive?

Question

css

Hello. A similar issue has already been resolved, but the block with the inscription moves out when the screen size decreases!
Help to make it non-departing!!!
An example is here codepen.io/girl13/pen/wzmQZV

Answer 1

Начудили конечно ) В стилях было прописано блоку и rgba и opacity и filter :)
Плюс такие картинки заливаются в background то есть фоном, ибо она не несет никакой информативной составляющей.

<div class="block1">
    <span class="span1">
            <p>Эталонное качество шведского пола в вашей квартире<br>30 лет гарантии от компании, подарившей  миру паркетную доску</p>
     </span>
</div>

.block1 {
  position: relative;
  height: 400px; 
  background: url(http://www.imageup.ru/img291/2562967/kahrs1.jpg);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.span1 {
    position: absolute;
    top: 130px;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    text-align: center;  
    padding: 10px 0;
}

.span1 p {
    color: white;
    font-size: 17px;
    line-height: 35px;
}