デバイス間のコンテンツと同じ位置に背景画像を貼り付けます

Question

website私は、画面のサイズ/デバイスに関係なく、同じ正確な位置にヘッダーの背景を配置したいと考えています。私は線の中心がh1の点に「スティック」したい。

私は近くに来ましたが、divの高さに起因すると思われるバグがあります。私はiPhone 5と同じサイズにブラウザのサイズを変更すると背景がわずかに異なるため、中心をドットの下に保つ位置は不可能です。私は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

は、あなたが何を避けたいこの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; 
} 
}