将背景图像相对于跨设备内容的相同位置粘贴

Question

我有一个website我希望无论屏幕大小/设备如何，标题背景都处于相同的确切位置。我希望线条的中心“坚持”在h1中的点。

我来了，但有一个错误，我认为是由div的高度造成的，当我将浏览器调整为与iPhone 5相同的大小时，背景略有不同，因此使用background-将中心保持在点下的位置是不可能的。我想避免this，这是线条穿过点的部分。

我不在乎背景是否被浏览器边界限制。我只是希望线条的中心始终保持在点之下！我如何实现这一目标？我不能发布的原代码是什么在服务器上（我用手写笔），但这里是我有产生相同的错误：

#header 
 
\t height: 344px 
 
\t max-width: 435px 
 
\t margin: 0 auto 
 
\t background: no-repeat url('/img/lines.png') 
 
\t background-position: -52px -2px 
 
\t background-size: 100% 
 
\t +below(435px) 
 
\t \t background-size: 320px 
 
\t \t background-position auto 
 
\t //haj.zso text 
 
\t h1 
 
\t \t text-align: center 
 
\t \t padding-top: 137px 
 
\t \t font-size: 65px 
 
\t \t font-weight: 700 
 
\t \t font-style: italic \t 
 
\t \t letter-spacing: -3.7px 
 
\t \t margin: 0

<div id="wrapper"> 
 
     <div id="header" class="animated zoomIn"> 
 
     <h1 class="animated fadeInDownBig">haj.zso</h1> 
 
     
 
     </div>

我只打与高度，最大宽度，背景位置，背景附件和背景大小的属性，没有运气......我觉得我没有采取正确的做法。

我没有上传它作为图像，因为我不想以后动画线条，并添加一个bg剪辑悬停在文本上。

Answer 1

试着用这一个

#header { 
    height: 344px; 
    max-width: 485px; 
    margin: 0 auto; 
    background: url("/img/lines.png") no-repeat; 
    background-position: center; 
    background-size: cover; 
    background-position-x: -57px; 
} 

@media only screen and (max-width: 400px){ 
#header { 
    max-width: 320px; 
    background-size: cover; 
    background-position-x: -111px; 
} 
} 

要避免什么