header image left: 0 - float mit browser resize - aber stop nach ausgerichtet mit page div element

Question

Ich habe eine Frage, die ich nicht besonders weiß, wie richtig zu entschuldigen, also im Vorraus wegen mangelnder Terminologie. Was ich versuche zu tun ist ein Headerbild ausgerichtet links - links: 0px; - mit Position: absolut; Wenn die Seite auf unterschiedlich großen Bildschirmen geladen wird, bleibt sie immer auf der linken Seite des Browserfensters. Aber gleichzeitig möchte ich, dass das Header-Bild aufhört, wenn es auf einen größeren Bildschirm geladen wird, wenn es links neben der Seite ausgerichtet ist (wenn das sinnvoll ist). Die Seite ist unter:

http://tinyurl.com/d2zttye

ich die Wellenbrechern Bild mit der Seite schwimmen will, wie es ändert die Größe, aber nicht mehr, wenn es das Hintergrundbild darunter trifft (die #page div). Wenn Sie also in Fenster laden, die größer als das Hintergrundbild (1592px) sind, wird es nicht weiter nach links schweben. Ab sofort schwebt es nicht mit der Seitengröße und wird auf kleineren Bildschirmen abgeschnitten.

Hoffentlich macht dies Sinn und lassen Sie mich wissen, wenn ich etwas klären muss. Jede Hilfe wäre sehr geschätzt!

Danke !!!

Answer 1

Ich habe es herausgefunden! Mit @media Bildschirm konnte ich definieren, wie die Kopfzeile auf der Seite positioniert werden, wenn das Browserfenster kleiner als 1592px und größer als 1593px ist. #bwheader ist das div und wenn das Fenster kleiner als 1592px ist, schwebt es links mit dem Browser mit einem 10px linken Padding. Wenn das Fenster größer als 1593 Pixel ist, bleibt es fixiert (aber mit der Position: absolut und zentriert das Div mit negativen Rändern und 50% links). Hoffe das hilft jedem, der es braucht!

@media screen and (max-width: 1592px) 
{ 
    #bwheader{ 
    position:absolute; 
    top:0px; 
    height:74px; 
    float:left; 
    padding-left:10px; 
} 
} 

@media screen and (min-width: 1593px) 
{ 
    #bwheader{ 
    position:absolute; 
    top:0px; 
    width:1592px; 
    margin-left:-796px; 
    left:50%; 
    height:74px; 
} 
}