Wiederholende Grafik unten mit weiterer Grafik dahinter

[Tian Kruse]

Hallo,

ich versuche gerade auf einer Webseite eine Grafik einzubinden, die möglichst immer am unteren Ende des Browsers sein sollte, und sich horizontal wiederholt.

Dann möchte ich hinter dieser Grafik eine weitere Grafik packen (es ist ein Baum, der hinter halbtransparentem Gras liegt), die immer am linken Rand des Browsers liegt.
Dieser soll über Media Queries nur eingeblendet werden, wenn der Browser mindestens X Pixel breit ist.

Ein sich wiederholendes Bild ist über ne Hintergrundgrafik per CSS grundsätzlich ja recht einfach zu realisieren - genau wie das einblenden eines Elementes per Media Queries.

Was ich nicht hinbekomme ist, dass
1. der Baum hinter dem Gras ist, da ich das Gras nur als Hintergrundgrafik eines <div> Elements per CSS wiederholen kann, oder?
2. das Gras immer am unteren Rand des Browsers ist
3. der Baum immer am linken Rand des Browsers bleibt

Ich wäre froh, wenn Ihr mir ein paar Stichworte mit auf dem Weg geben könntet, wie sich das umsetzen lässt.

Beste Grüße
Tian

[Gunnar Bittersmann]

@@Tian Kruse:

nuqneH

da ich das Gras nur als Hintergrundgrafik eines <div> Elements per CSS wiederholen kann, oder?

Nein.

Ich wäre froh, wenn Ihr mir ein paar Stichworte mit auf dem Weg geben könntet, wie sich das umsetzen lässt.

Multiple Hintergründe.

Qapla'

[Tian Kruse]

@@Tian Kruse:

nuqneH

da ich das Gras nur als Hintergrundgrafik eines <div> Elements per CSS wiederholen kann, oder?

Nein.

Ich wäre froh, wenn Ihr mir ein paar Stichworte mit auf dem Weg geben könntet, wie sich das umsetzen lässt.

Multiple Hintergründe.

Qapla'

Um dann per Media Queries den Baum auszublenden wenn Browser Breite kleiner xxx Pixel ist, mache ich also am besten 2 Stylesheet fertig? Einen nur mit Gras und einen mit Gras und Baum?

[Gunnar Bittersmann]

@@Tian Kruse:

nuqneH

Um dann per Media Queries den Baum auszublenden wenn Browser Breite kleiner xxx Pixel ist, mache ich also am besten 2 Stylesheet fertig? Einen nur mit Gras und einen mit Gras und Baum?

2 Stylesheets? Nö.

2 Regeln in dem einen Stylesheet. Pseudocode:

html
{
  height: 100%;
  background: gras;
}

@media (min-width: breakpoint)
{
  background: gras, baum;
}

Qapla'

PS: Zitiere bitte sinnvoll, nicht alles.

[Tian Kruse]

Wunderbar, hat alles bestens geklappt bisher.
Wenn ich das HTML Tag per CSS in dieser Art Style

html
{
  height: 100%;
  background: gras;
}

habe ich allerdings noch ein Problem:
Das ist dann ja wirklich alles ganz hinten im Dokument - Inhalt, der länger als der Browser ist, liegt dann ja über dem Gras bzw. dem Baum.
Ich würde allerdings lieber das Gras bzw. den Baum im Vordergrund haben. Sprich: Inhalte, die länger als der Text sind, kommen hinter dem Gras hervor.
Wie lässt sich das realisieren?

Beste Grüße

[Matthias Apsel]

Om nah hoo pez nyeetz, Tian Kruse!

Das ist dann ja wirklich alles ganz hinten im Dokument - Inhalt, der länger als der Browser ist, liegt dann ja über dem Gras bzw. dem Baum.
Ich würde allerdings lieber das Gras bzw. den Baum im Vordergrund haben. Sprich: Inhalte, die länger als der Text sind, kommen hinter dem Gras hervor.
Wie lässt sich das realisieren?

z-index könnte helfen.

Matthias

[Christian Kruse]

Moin Namensvetter,

html
{
  height: 100%;
  background: gras;
}

habe ich allerdings noch ein Problem:
Das ist dann ja wirklich alles ganz hinten im Dokument - Inhalt, der länger als der Browser ist, liegt dann ja über dem Gras bzw. dem Baum.
Ich würde allerdings lieber das Gras bzw. den Baum im Vordergrund haben. Sprich: Inhalte, die länger als der Text sind, kommen hinter dem Gras hervor.
Wie lässt sich das realisieren?

Zum Beispiel durch ein div mit position:fixed.

LG,
 CK

[Gunnar Bittersmann]

@@Christian Kruse:

nuqneH

Zum Beispiel durch ein div

Würg!

Wozu gibt’s denn Pseudoelemente? html::after

Qapla'

[Matthias Apsel]

Om nah hoo pez nyeetz, Tian Kruse!

Beide Lösungsvorschläge bergen die Gefahr, dass u.U. Links nicht mehr anklickbar sind.

Matthias