Anderes Hintergrundbild bei mobiler Ansicht

  • Betroffene Version
    WoltLab Suite 3.1

    Ich habe eine Startseite mit Hintergrundbild. Da dies für die mobile Ansicht natürlich zu groß ist, würde ich das gleiche gerne verkleinert als Hintergrundbild bei der mobilen Ansicht einsetzen.

    Sicherlich wird da etwas per CSS möglich sein. Aber wie spreche ich dann die Seite an?

    . mobile wirds wohl kaum sein, oder?

    Hat da jemand Erfahrungen und kann weiterhelfen?

  • Ok, ich habe jetzt folgendes im CSS eingefügt:

    Da sich bei mir dadurch nichts geändert hat, gehe ich mal davon aus, dass ich irgendetwas falsch gesetzt habe.

  • Links gibt es hier nicht und Anfragen danach werden geflissentlich übergangen. Die Ursache für den ausbleibenden Erfolg dürfte übrigens im verwendeten Code liegen. Einfach mal die Beispiele in der von ReeN verlinkten Seite anschauen und Vergleiche anstellen.


    Gruß norse

    Zugang zu meinen Arbeiten und dem dazugehörigen Support bekommt Ihr bei Interesse hier und hier.

  • Du hast in .main auch noch ein Hintergrundbild:

    CSS
    .main {
        background-image: url(../images/bg-content.png);
    }

    Das legt sich dann über das Hintergrundbild von body. Man sieht aktuell also immer das Hintergrundbild von .main.

  • Dann mach es einmal mit @include screen-lg { und einmal mit @include screen-md-down {. Den Ansatz hattest du weiter oben ja schon.

    Das @include screen-md-down { hast du aktuell ja auch noch drin und dieses Hintergrundbild wird bei einem schmaleren Browser auch genutzt. Man sieht aktuell nur nichts davon, weil das wie gesagt vom .main Hintergrundbild überdeckt wird.

  • Wenn ich nun aber die beiden verschiedenen Hintergrundbilder auch auf den anderen Seiten angezeigt haben möchte? Dadurch, dass ich ja main herausgenommen habe, werden nun nur noch auf der Startseite diese Bilder angezeigt, nicht aber mehr auf den anderen Seiten.

  • Du schränkst den Code ja via body[data-page-identifier="com.woltlab.wcf.generic154"] { gezielt ein, so dass er nur auf dieser einen Seite greift. Wenn du stattdessen einfach nur body { nimmst, greift der Code auf allen Seiten. Also dann werden die beiden Hintergrundbilder auf allen Seiten angezeigt.


    Und nur falls es dich interessiert:

    Spoiler anzeigen

    Falls du auf den anderen Seiten weiterhin ganz normal das .main Hintergrundbild haben wollen würdest, hättest du auch das .main Hintergrundbild ganz normal drin lassen und es dann gezielt für deine eine Seite via CSS ausblenden können...

    CSS
    body[data-page-identifier="com.woltlab.wcf.generic154"] .main {
        background-image: none;
    }

    ....oder stattdessen von Anfang an via :not() dafür sorgen, dass es auf allen Seiten außer deiner einen Seite angezeigt wird, indem du den .main Code entsprechend anpasst:

    CSS
    body:not([data-page-identifier="com.woltlab.wcf.generic154"]) .main {
        background-image: url(../images/bg-content.png);
    }

    body:not([data-page-identifier="com.woltlab.wcf.generic154"]) = alle Seiten, in denen dieser data-page-identifier nicht vorkommt. Also in diesem Fall: Alle anderen Seiten.

  • Glaube, es funktioniert wie gewünscht. Auch dafür besten Dank.

    Sorry, war zu schnell.

    Jetzt wird in der mobilen das Bild doppelt angezeigt. In der normalen Ansicht jedoch normal.


    Hatte jetzt den Code mit

    und unter der separaten Seite auch nochmal gesetzt. Dort allerdings ohne .main


    Damit ich jetzt nich falsch verstanden werde.


    Auf allen Seiten - mobile und normale Ansicht - sollen die jeweiligen Bilder greifen. Also nicht nur auf die Startseite.

    Alles zurück. Wenn der Browser nicht so aktulisiert, wie man sich das vorstellt, kann es nicht klappen....

    3 Mal editiert, zuletzt von The White Wolf (10. Oktober 2019 um 13:26)

  • Jetzt habe ich aber gleich die nächste Frage.

    Und zwar möchte ich, dass die Grafik hoch und quer gleich angezeigt wird. Momentan ist es so, dass wenn ich es hochkant anzeigen lasse, es gut aussieht, quer dann aber rechts und links Teile des Bildes fehlen - oder das Bild dann doppelt angezeigt wird.

    Mit dem Befehl:

    width: 100%; height: auto;

    habe ich bisher nichts erreichen können. Allerdings vermute ich, dass ich ihn ggf. auch falsch gesetzt habe.

    Vielleicht kann und mag mir jemand einen Tipp geben. Danke.

Jetzt mitmachen!

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