Hintergrundbild Header - Probleme mit Größe

  • Affected Version
    WoltLab Suite 5.2

    Hallo zusammen!

    Gerne möchte ich im Header-Bereich ein Hintergrundbild einfügen. Wie das geht, habe ich bereits herausgefunden - das Bild liegt im Dateipfad und den CSS-Code habe ich auch eingefügt. Das Bild ist auch im Header zu sehen, allerdings viiiieeeeeel zu groß. Es ist ein Foto, dass im Querformat mit der iPhone-Kamera aufgenommen wurde. Im Header zu sehen ist aber nur ein ganz ganz kleiner Ausschnitt des Bildes.

    Da ist es ja eine clevere Idee, einfach mal die Größe des Fotos anzupassen - dazu habe ich von meinem Header einen Screenshot gemacht und die Maße davon genommen (ich glaube es waren 1.600 x 160, so ungefähr). Habe ich dann so angepasst und die Datei erneuert - leider habe ich exakt das gleiche Problem. Ich sehe jetzt ungefähr 3% mehr vom Bild, Problem besteht ansonsten weiterhin.

    Was mache ich falsch? Irgendwas im Code? Auf welche Größe muss ich mein Foto anpassen, um es im Header einzufügen und es in einer „normalen Desktop-Ansicht“ vollständig zu sehen ist? Gibts dann noch eine Möglichkeit, dass es sich automatisch anpasst wenn ich das Fenster verkleinere, die Seite am iPad abrufe oder so?

    Vielen Dank vorab für eure Hilfe !!! :)

    Hier einmal mein CSS-Code:

    Code
    #pageHeaderContainer {
        background-image: url('#{$style_image_path}hintergrund Kopie 2.jpg');
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
  • Probier das mal

    Code
    html {
        background: url('#{$style_image_path}pageBG.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center top;
        background-attachment: fixed;
    }

    ;)

Participate now!

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