Stick Hintergrundbild in der gleichen Position relativ zum Inhalt über Geräte

Question

Ich habe eine website, wo ich möchte der Header-Hintergrund an der gleichen genauen Position sein, egal, was die Bildschirmgröße/Gerät. Ich möchte, dass die Mitte der Linien an den Punkt in der h1 "klebt".

Ich kam in der Nähe, aber es gibt einen Fehler, der meiner Meinung nach durch die Höhe des div verursacht wird, wenn ich meinen Browser auf die gleiche Größe wie ein iPhone 5, der Hintergrund ist an einem etwas anderen Ort, so Hintergrund verwenden Position, um die Mitte unter dem Punkt zu halten, ist nicht möglich. Ich möchte vermeiden, this, der Teil, wo die Linien überqueren den Punkt verlassen.

Es ist mir egal, wenn der Hintergrund von der Browsergrenze abgeschnitten wird. Ich möchte nur, dass die Mitte der Linien immer unter dem Punkt bleibt! Wie erreiche ich das? Ich kann nicht den ursprünglichen Code nach, was auf dem Server ist (ich benutze Stift), aber hier ist, was ich habe, das die gleichen Fehler produziert:

#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>

Ich habe nur gespielt herum mit der Höhe, Max-Breite, Hintergrund-Position, Hintergrund-Anhang und Hintergrund-Größe Eigenschaften, ohne Glück ... Ich fühle, dass ich nicht den richtigen Ansatz dazu überhaupt bin.

Ich habe es nicht als Bild hochgeladen, weil ich die Zeilen später animieren möchte, und fügen Sie einen bg-Clip bei Hover zum Text hinzu.

Answer 1

Versuchen Sie CSS mit dieser

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