html - 图像上的填充文本

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%，它也会改变文本的宽度。

使用上面的代码，一切都在它应该在的地方，但是当我缩小浏览器窗口时，文本的位置似乎是绝对的，不会随着我的其余代码移动。有没有更好的方法来做到这一点，还是我输入了错误的东西？我需要补充什么吗？请告诉我，谢谢!

最好的问候，软糖

Answer 1

使用@media 断点 demo

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