Responsive-Anpassung bei Hintergrundgrafik

  • Hallo zusammen,
    ich habe eine Hintergrundgrafik (1300px) eingebunden und frage mich nun wie ich es hinbekomme, dass die Grafik sich an die unterschiedlichen Bildschirmgrößen (Smartphones, Tabletts) anpassen lässt bzw. wie man dies in der style.css deklariert.
    Generiert man hierzu mehrere Hintergrundgrafiken mit unterschiedl. Breiten und verwendet folgende Angaben?

    Media screen and (min-width: 1180px) {
    background: url("/wordpress/wp-content/uploads/holzdiele-02.jpg") no-repeat;
    }

    Media screen and (min-width: 1300px) {
    background: url("/wordpress/wp-content/uploads/holzdiele-03.jpg") no-repeat;
    }

    • 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 teilweise auch mal background-size:cover versuchen. Dann passt sich der Hintergrund an die Größe des Containers an. Sinnvoller ist es aber trotzdem mit kleineren Bildern zu arbeiten, schon alleine bzgl. der Ladezeiten.

    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]

  • Hab das mal mit der Option cover probiert; werde mir das nun mal heute abend auf versch. Endgeräten anschauen. Vielen Dank Euch für die Tipps ...

Jetzt mitmachen!

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