Header Width Responsive

  • Hallo,


    ich bräuchte eure Hilfe, bin ziemlich sehr verzweifelt...


    Mein Vorhaben ist es, im Header einen Hintergrundbild Responsive zum Content anzupassen.

    Auf meinem Full HD ( 1920x1080px ) Monitor sieht das perfekt aus, allerdings sobald ich den Browser etwas kleiner ziehe ist die Breite wieder komplett falsch.

    Außerdem habe ich das Gefühl, dass die Grafik nach links floatet....



    Mein Code:

    Code
    .pageHeaderFacade > .layoutBoundary {
        background: url(../images/header.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        float: right;
        width: 100%;
        min-width: 0;
        max-width: 80%;
    }


    Bilder:


    So sollte das aussehen ( ist auf Full HD perfekt

    html-seminar.de/woltlab/attachment/1818/



    Und hier wenn ich den Browser kleiner ziehe ist der Header komplett verrutscht...

    html-seminar.de/woltlab/attachment/1819/




    Ich hoffe ihr könnt mir weiterhelfen.


    Meine Vermutung ist, dass ich bei Max-Width die Breite falsch eingebe oder mit margin-left arbeiten müsste...


    Vielen Dank im voraus :)

  • Hast du einen Link zu der Seite?


    Mit den Informationen können wir wenig bis nichts anfangen. Wir kennen weder den Quelltext noch das restliche CSS noch die Websitebilder.


    Zudem geht aus deiner Frage nicht hervor was dich stört. "Die Seite ist bei kleineren Auflösungen nicht perfekt" ist keine nachvollziehbare Fehlerbeschreibung.


    Eine width-Angabe größer als eine max-width-Angabe ist unlogisch. Die width-Angaben sind somit sachlich falsch und wahrscheinlich komplett überflüssig.


    Ähnliches gilt für die float-Angabe. float wird verwendet wenn Text grafiken umfließen soll. Da kein Text vorhanden ist, ist sie überflüssig. Auswirkungen auf Hintergrundbilder hat die float-Angabe überhaupt nicht. Kann also auch weg.


    Mehr lässt sich aus deinen Angaben leider nicht raten.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!