將背景圖像相對於跨設備內容的相同位置粘貼

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; 
} 
} 

要避免什麼