Wechselnder Header-Hintergrund und Responsive

    Hallo zusammen,


    beim Thema Header habe ich einiges gefunden und ist mir auch klar, hat jedoch jemand eine Hilfestellung, bzw. ein Codebeispiel als Hilfe, wie ich den Header-Hintergrund auf jeder Seite mit einer neuen Grafik anzeigen lassen kann und wie das dann noch für Responsive angepasst werden kann?


    Danke im voraus!

    Nicht beim Header-Hintergrund machen, sondern bei jeder Seite unter "2" Eigenschaften --> Reiter "Grafik" jeweils ein Bild einfügen.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Hallo,


    danke, habe ich schon probiert, aber das Betrifft nur den Seitenhintergrund, bzw. Seiteninhalt. Ich benötige eine Kopfgrafik (Head) auf jeder Seite anders, ABER als Vollbild. Die Grafik ist auf 1920px festgelegt, der Seiteninhalt auf 960px.

    Das heißt du willst zusätzlich zum Hintergrundbild noch eine Grafik darüber legen ? Was hat das für einen Sinn?


    Einen Headerhintergrund kannst du mit 1920px machen, der wird aber auf jeder Seite angezeigt.


    Dann gibt es noch den Header wo du eine Grafik einfügen kannst. Außerdem kann man über den Header eine Slideshow einbinden wo man Bilder einfügen kann, wobei man bestimmen kann welches Bild auf welcher Seite angezeigt wird. Das Problem dabei ist du kannst nur 960px breite Bilder verwenden für deine Seite. Wenn dann müsstest du den Header auf 1920px setzen, dann wäre es auch möglich. Der NAchteil es springt sofort auf den mobilen Teil um.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Der Hintergrund ist einfach einfarbig und ich benötige im Grunde die normale "Head-Grafik" als Vollbildgrafik. Wie du richtig schreibst, müsste ich dann die ganze Seite auf 1920px, was ich aber nicht möchte. Stattdessen soll im Standard-Head halt nichts rein und dafür irgenwie die Vollbildgrafik rein. Hatte das schon über Header-Hintergrund realisiert, aber das geht dann nur für die Startseite und nicht für alle anderen, bzw. nach dieser Lösung suche ich eigentlich.

    Wieso du es eigentlich in den Headerhintergrund packen willst, verstehe ich immer noch nicht!


    Etwas umständlicher kann man den Headerhintergrund auf jeder Seite überschreiben mit folgenden CSS Code...

    CSS
    1. <style>
    2. #imHeaderBg {
    3. background:url("files/header-bg.jpg") no-repeat;
    4. background-position:center;
    5. background-size:cover;
    6. }


    Die Bildnamen musst du für jede Seite ändern und auch unter "4" Seo&Code Reiter "Erweitert" bei hinzufügen im Ordner "files" hochladen.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    Der erste Tip von Andy ist doch am besten geeignet. Mach die Kopfgrafik so groß wie du sie brauchst 1920 x 500 (z.B.) und binde sie auf jeder Seite bei den Seiteneigenschaften ein. Ausrichtung oben. Das sollte ohne anderen Schnickschnack funktionieren. Wie sich das in der responsiven Darstellung auswirkt habe ich nicht getestet.

    Hallo,


    ja, stimme ich zu, die Lösung wäre eigentlich optimal. Um die Darstellung jedoch unter diversen Auflösungen nicht abgeschnitten zu haben, müsste ich "An Fenster anpassen" wählen, auch gut und funktioniert, ABER, dann bleibt die Grafik fixiert und der Inhalt scrollt darüber. Hierzu vielleicht eine Lösung wie man das vermeiden, bzw. abstellen kann?

    Gibt es da nicht ein Häkchen "fixieren"??? Wenn ja, deaktivieren. Bin leider nur mobil online und kann nicht schauen.

    Wie wäre es dann wenn du die GRafik 1920px breit machst? Dann brauchst du es nicht an Fenster anpassen stellen.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

    das die Grafik in der richtigen Größe gemacht wurde, hatte ich mal vorausgesetzt

    also, wie schon oben beschrieben. Seiteneigenschaften/Grafik einfach oben ausrichten fertig. Passt sich mobil nicht mit an. Würde ich aber beim mobilen Template auch mit mehreren angepassten headerbildern lösen


    Guckst du...

    Hallo Labelle,


    vielen Dank! Die Grafik ist auf 1920px angelegt. Anpassen bis runter auf 1024px klappt, also auch kein Problem. Mobile Anpassung muss sein, auch klar. Einziges Problem was ich habe, ist bei der "Fixierung", bzw. "An Fenster anpassen" der Seiteninhalt beim scrollen nach oben über die Grafik läuft und genau das soll nicht sein.

    Vergiss doch das mit dem 'an Fenster anpassen' das brauchst du nicht. Du musst natürlich die Höhe des Headers beim Templatestil entsprechend einstellen. Wenn deine Grafik 400px hoch ist, dann musst du auch den Header 400px hoch einstellen. Header und Headerhintergrund auf transparent setzen.

    ist doch klar, Hintergründe werden nicht responsive dargestellt. Das wirst du mit x5 Bordmitteln nicht umsetzen können. Es gibt sicherlich Möglichkeiten so etwas umzusetzen, dazu reicht mein Wissen leider nicht aus.