Header passt sich der Bildschirmgröße an

  • Hallo Forengemeinde,

    ich habe unglücklicherweise ein kleines Problem mit meinem Blog (http://www.gesetze-und-rechte.de) und hoffe auf eure Hilfe :)

    Es geht um das Header Bild, es ist nicht statisch, sondern passt sich stets der Bildschirmgröße / Bildschirmauflösung an. Das ist an sich kein Problem, nur leider verschwindet ein Teil des Logos bei größeren Bildschirmen und rutscht in die darunterliegende Navigationsleiste. Je größer der Bildschirm, desto größer der abgetrennte Teil. Das sieht leider nicht sehr schön aus.

    Meine Vermutung ist, dass sich der Header aufgrund der mobilen Funktion anpasst / verändert. Bei kleineren Auflösungen stellt sich automatisch die mobile Seite ein. Wenn man unter Windows das Fenster verkleinert kann man das sehr gut beobachten. Meine Frage an euch ist, was ich tun muss, damit das Headerbild sich nicht automatisch der Bildschirmgröße anpasst.

    Über ein paar hilfreiche Ratschläge wäre ich sehr dankbar, ich konnte im Netz leider nichts brauchbares finden ...

    Vielen lieben Dank im Voraus!

    Gruß Marc

    p.s: Mein theme ist "Big Brother" (https://theme.wordpress.com/themes/big-brother/)

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Du kannst das wie folgt anpassen:

    In der style.css folgenden Wert im den Zeilen ab 624 hinzufügen: background-position: top;

    Der Block sollte dann wie folgt aussehen:

    .header-image {
    background-repeat: no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    background-position: top;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }


    Am besten legst du aber ein Child Theme an, damit die Änderungen nicht nach jedem Update verloren gehen.

    Gruß Benno (http://www.bilderundmehr.eu)

    Nein, dem habe ich nichts hinzuzufügen :-)
    [HR][/HR]

  • Ich fürchte es hatte keinen Effekt. Es sieht jetzt so aus, wie du es vorgeschlagen hast:

    .header-image {
    background-repeat: no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute;
    background-position: top;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    Leider ist ein Teil der "Waage" auf meinem Rechner immer noch in der Navigation :(

  • Das dürfte daran liegen, dass das Bild sehr groß ist und schon bei großen Bildschirmen skaliert wird.

    Nein, dem habe ich nichts hinzuzufügen :-)
    [HR][/HR]

  • Darf ich fragen wie du das meinst und wie dagegen Vorkehrungen treffen kann?

    Ich bin leider total neu in der Thematik und weiß mit all diesen technischen Dingen nicht viel anzufangen - da kommen mir ein paar Experten sehr gelegen. Nochmals danke für eure Hilfe! :)

  • Ändere den Code von BvW mal so ab:


    Über einen media-query bis max 660px z. B. kannst du dann die background-size auf 240% auto; setzen. Lies dich mal etwas schlau. Dich Stichwörter hast du ja jetzt.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

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