Проложенный текст по изображению

Question

Приносим извинения за этот очень нубийский вопрос, но здесь я не нашел ничего подобного.

Так что мой HTML выглядит примерно так:

<div id="headerone"> 
    <h1>How To <br> Bench Press</h1> 
</div> 

и мой CSS выглядит следующим образом:

#headerone { 
      background: url(http://www.prodality.com/wp-content/uploads/2013/03/Workout.jpg); 
      background-repeat: no-repeat; 
      background-position:center; 
      height:630px; 
      padding-top: 100px; 
      padding-left: 600px; 
     } 
     #headerone h1 { 
      background-color: black; 
      display: inline; 
      font-size: 30px; 
      color: white; 
      line-height: 50px; 
      padding: 10px; 
      box-decoration-break: clone; 
      -webkit-box-decoration-break: clone; 

Я хочу иметь фона героя изображение с шириной 100%, и я пытаюсь добиться этого эффекта:

http://codepen.io/anon/pen/Wbaapq

Наверху моего изображения, но если я сделаю ширину фонового изображения на 100%, это изменит ширину текста.

С кодом выше все должно быть, но когда я делаю окно браузера меньше, позиция текста кажется абсолютной и не перемещается вместе с остальной частью моего кода. Есть ли лучший способ сделать это, или я вношу что-то неправильно? Все, что мне нужно добавить? Дайте мне знать, спасибо!

С наилучшими пожеланиями, Omgummy

Answer 1

использование @media точкой останова demo

@media (max-width: 400px) { 
    .padded-multiline { 
    width: 100%; 
    } 
}