BlackHell: Leeres Element mit Responsivem Background

Ich bastle an einem Template und habe dort einen Slider aus Hintergrundbildern erstellt, der eine feste Breite als auch Höhe hat.

Jetzt muss ich das mobil optimieren.

Wenn ich die Bilder direkt im <img> angebe, funktioniert auch alles, nur nicht, wenn ich diese als Hintergrundbilder haben will.

Warum als Hintergrundbilder?

Damit ich sie leichter austauschen kann. Ich muss so nur in die CSS Datei und dort ändern und nicht alle einzelnen Dinge, die mit dem Template in zusammenhang hängen.

Da ich keine festen Werte angeben kann, habe ich für den Hauptinhalt eigentlich Breite und Höhe von 0.

Gebe ich in der CSS Datei die px Werte für Breite und Höhe an, klappt zwar alles, aber es ist dann nicht mobil geeignet.

Ich könnte es für mobil auch ausgeblendet lassen, das sollte aber die letzte Option sein.

Gibt es schon eine Möglichkeit, dem Browser mitzuteilen, er möge das Element so groß wie den Hintergrund machen?

Alle Hintergrundbilder haben die gleiche Grundbreite und Grundhöhe.

  1. Hallo

    Damit ich sie leichter austauschen kann.

    Das hat nun überhaupt nichts damit zu tun ob Hinter- oder Vordergrundbild gewählt werden sollte.

    Deshalb auch deine Probleme mit dem CSS. HTML und CSS sind so aufeinander angestimmt, dass sie am besten funktionieren, wenn sie regelgerecht eingesetzt werden.

    Für dein Problem solltest du dich mit den Einheiten vw und vh beschäftigen. Wenn alle Bilder gleich groß sind benötigst du davon auch nur vw.

    Gruss

    MrMurphy

  2. @@BlackHell

    Gibt es schon eine Möglichkeit, dem Browser mitzuteilen, er möge das Element so groß wie den Hintergrund machen?

    Nein. Wohl auch zukünftig nicht.

    Hintergrundbilder sind Verzierungen. Verzierungen können ihre Größe dem Inhalt anpassen, nicht umgekehrt.

    Wenn deine Bilder keine Verzierungen sind, gehören sie nicht als Hintergrundilder ins Stylesheet, sondern als imgs ins Markup. Mit Alternativtext.

    LLAP 🖖

    --
    „Wenn du eine weise Antwort verlangst, musst du vernünftig fragen.“ —Johann Wolfgang von Goethe
  3. Danke für die Antworten.
    Ich habe den Slider nun für mobile Geräte ausgeblendet. Im CSS habe ich width und height gesetzt und background-size auf 100% auto gesetzt.
    Damit wird das Bild nur gestaucht und nicht komplett responsiv, aber damit kann ich leben.