Anderes Hintergrundbild bei mobiler Ansicht

  • 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?

  • Hey,


    damit wird das CSS nur auf Smartphones und Tablets ausgeführt


    CSS
    @include screen-md-down {
    /* hier das bild anpassen*/
    }

    Lg SamFreaks

  • 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.

  • 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.

    Kannst du einen Link zur Seite posten? (Geht auch per PN)

    Lg SamFreaks

  • 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

  • Du hast mehrfach den Selektor body angegeben. Da der aber schon in Zeile 2 steht, brauchst du die anderen Vorkommnisse nicht.

    Plugins, Designs, Hosting, Support und mehr: KittMedia

  • Hm, jetzt habe ich - so wie du erwähnt hast, nur noch einmal den Selektor "body" im Code. Geändert hat sich leider dadurch noch nichts. Es wird weiterhin nur der andere Hintergrund angezeigt.

  • 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.

  • Ja, es soll auf der Hauptseite der Startseite so sein, dass ein Bild für die höheren Auflösung und ein anderes für die mobilen Ansichten angezeigt wird.

  • 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:

  • 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....

  • 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.