Headerbild wird an den Seiten abgeschnitten, wenn ich mit dem Laptop mir die Seite anschaue

  • Affected Version
    WoltLab Suite 5.5

    Hallo Zusammen,


    ich war in der Annahme, dass Woltlab responsiv arbeitet. Nun wird das Headerbild auf meinem Laptop an den Seiten abgeschnitten und das würde ich gerne ändern.

    Auf dem Handy verschwindet es ganz - das finde ich nicht so schlimm, aber an verschiedene Monitorbreiten sollte es sich doch schon anpassen.

    Kann mir jemand sagen, wie ich das ändern kann?

    Bin noch Anfänger in diesem Bereich und bin für jede :) Hilfe dankbar

  • Ein Link zur Seite könnte hilfreich sein.





    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier.

  • Hallo Dragosius, ja genau das meine ich. Auf dem Lappy oder Tablett wird immer das Headerbild abgeschnitten und das sollte ich ändern.

  • Das geht nicht, weil das Bild im Hintergrund viel zu schmal ist:



    Es müssten noch etliche CSS-Anpassungen vorgenommen werden, damit das einigermaßen vernünftig aussieht.

  • Ups, also das Headerbild ist zu schmal und deswegen werden die Seiten beim kleineren Bildschirmen abgeschnitten?

    Da dachte ich eher, dass es zu breit ist :(


    Es müssten noch etliche CSS-Anpassungen vorgenommen werden, damit das einigermaßen vernünftig aussieht.


    Das Wort "etliche" verschreckt mich ein wenig. Da bin ich wohl zu naiv an die Sache rangegangen. Ich war der Meinung und hatte es so gelesen und verstanden, dass Woltlab responsiv ist.

  • In welcher Größe müsste ich es den anlegen? Hatte dazu nichts konkretes gefunden und alle, die auch ein Headerbild nutzen haben Größen von 2000 Pixelbreite genommen :(

  • Ändere cover in contain und verdopple die Höhe in 2560 x 500 Pixel oder so, dann sollte es passen. Und position in center ändern.

    Wir😳leben😳auf😳einer😳Kugel😳und😳du😳wunderst😳dich😳ernsthaft😳über😳etwas😳



    🐶 x 27 ♥️ x 248

  • Trick 27 ☝️

    Wir😳leben😳auf😳einer😳Kugel😳und😳du😳wunderst😳dich😳ernsthaft😳über😳etwas😳



    🐶 x 27 ♥️ x 248

  • Hier:

    Code
    #pageHeaderFacade {
        background-image: url(../images/style-5/custom/Headerbild-black2.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top center;
    }


    cover-> contain


    top center->center

    Wir😳leben😳auf😳einer😳Kugel😳und😳du😳wunderst😳dich😳ernsthaft😳über😳etwas😳



    🐶 x 27 ♥️ x 248

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!