图像上的填充文字

对于这个非常不利的问题，我表示歉意，但在这里找不到类似的问题。图像上的填充文字

所以我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

来源

2015-03-13 omgummy

是的，你需要添加@media断点 – 2015-03-13 07:27:11

使用@media断点demo

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

来源

2015-03-13 07:31:33

我的文字似乎仍然当我尽量减少我的浏览器窗口中不动？ – omgummy 2015-03-13 07:41:24

@omgummy我的代码在你的bowser中有效吗？ – 2015-03-13 07:43:51

它看起来像工作正常，我逐字复制它，现在文本随浏览器移动，但背景图像大小发生变化，并且不会100％与浏览器一起浏览。 – omgummy 2015-03-13 07:49:17

图像上的填充文字

回答

相关问题