Как сделать блок поверх картинки адаптивным?

Question

[Елена Вахрушева]

Здравствуйте. Подобный вопрос уже решался, но блок с надписью съезжает, когда размер экрана уменьшается!
Помогите сделать чтобы был НЕсъезжающим!!!
Пример тут codepen.io/girl13/pen/wzmQZV

Comments

[Alex]

Там картинка вообще не адаптивна)
Я так полагаю класс не тот в css.

А вообще сделайте вы кратинку background

Answer 1

[axblue]

Начудили конечно ) В стилях было прописано блоку и 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;
}

Comments

[Елена Вахрушева]

крутооо!! Спасибо!