Background responsive

    Hallo - habe folgenden Eintrag zum Background-image im style.css, leider verschwindet das Background-image auf Tablet und Smartphone und auch im PC-Browser sobald ich das Fenster verkleinere. Jemand eine Idee, wie ich das Background-image responsive machen kann? Danke

    .site-header .home-link {
    color: #141412;
    display: block;
    margin: 0 auto;
    margin-top: 20px;
    max-width: 1080px;
    min-height: 230px;
    padding: 0 20px;
    text-decoration: none;
    width: 100%;
    background-image: url(images/logo.png);
    background-repeat: no-repeat;
    background-size: auto !important;
    background-color: transparent;
    background-position: center;
    }

    • Gerade eben
    • 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

    und welche css hast du dazu im media querie?

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    Weiterhelfen könnte man, wenn man sich das live anschauen könnte. Dann könnten wir uns selber raussuchen, was im media query steht.

    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]

    PN nützt in einem öffentlichen Forum nix :evil:

    [size=10]Bitte immer zuerst die Forensuche nutzen und erst danach Deine Fragen hier im Forum stellen, denn sehr vieles wurde schon mehrfach beantwortet. Bitte dabei auch die Forenregeln beachten.
    Kein Support per PN - Fragen gehören ins Forum.[/SIZE]
    [size=8]Wenn du eine weise Antwort verlangst, musst du vernünftig fragen. (Johann Wolfgang von Goethe)[/SIZE]

    Ich gebe maxe vollkommen Recht. Ich antworte auf solche PNs auch nicht. Sorry, aber es gibt z. B. auch URL-Shortener o.ä.

    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]

    Zitat von chrischroschris

    Ja - habe die URL auch gepostet, aber da stand, "muss erst geprüft und freigeschaltet werden"........


    ist freigeschaltet :-)

    Schau mal in deine style.css. Ab Zeile 3344 beginnen die Media Queries. Da wird da wird jedes mal für .site-header .home-link das background-image auf none gesetzt. Das müsstest du löschen bzw. noch besser im Child-Theme überschreiben.

    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]

    Aha - ja, jetzt verschwindet es nicht mehr, aber es skaliert sich nicht bei Verkleinerung und springt - auch wenn ich background-size: cover !important; einsetze wird das Background-image zu groß skaliert und bei Verkleinerung nicht kleiner als Originalgröße - woran kann das liegen?

    Versuch es mal mit contain anstatt cover. Ich würde das ganze dann nur im media query bis 767px setzen. Such mal nach Media (max-width: 767px) in deiner style.css.

    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]

    Hallo chrischoschris,

    momentan sind unter deinem Link 37 Fehler in meiner Chromium-Console. Kann sein, dass der Chromium spinnt, kann sein, das du gerade umziehst mit der Seite. Wenn deine CSS-Änderungen nicht angenommen/angezeigt werden, dann kann es sein, dass dein CSS-Selektor nicht spezifisch genug ist. Eine super Erklärung gibts hier!

    Kurz zusammengefasst: wenn auf ein DOM-Element mehrere CSS Selektoren passen, dann wird der genommen, der am genauesten passt! Bsp: "a.my-class" passt besser als "a" auf <a class="my-class">

Jetzt mitmachen!

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

Benutzerkonto erstellen Anmelden