Frage zu Foundation & Hintergrundbild - Stack?

International German
1

Hallo Community,

nachdem mir hier mit meinem letzten Thema so toll geholfen wurde: vielleicht habt Ihr ja einen Tipp für mich.
RW 7.2.1
Foundation neueste Version

Ich möchte gerne auf meiner Webseite http://www.cafra-arabians.com das Hintergrundbild auf jedem Device in voller Breite und oben gefixed dargestellt haben.

Wenn ich das Bild in den Site-Styles festlege, dann kann ich es fixen, es variiert dann aber in der Breite je nach Bildschirmgröße bzw. Device. Beispiel auf meiner Amardillo-Test-Seite: http://www.baschwa.net/test2/.

Im Prinzip hätte ich es gerne so, wie es im Thema “Repixel” dargestellt wird: http://www.multithemes.com/examples/repixel/?utm_source=realmac-community&utm_medium=listing&utm_campaign=RePixel.

Any suggestions? Danke vielmals!
Barbara

2

Also eigentlich ein ganz normales Foundation-Image mit der Angabe “grow to conainer width” als gefixtes Background-Image.

3

Schau dir mal den Eclipse-Stack von Joe Workman an - vielleicht ist es das, was du suchst

1 Like
4

Danke, der führt mich glaube ich eher nicht dahin, wo ich hin will.

Aber JW ist schon mal nicht schlecht, der Target-Stack sieht so aus, als ob es das ist, was ich suche.

Gruss Barbara

5

Hallo Barbara,

ich würde so etwas mit SectionsPro und SectionsBox Stacks lösen. Es geht aber bestimmt auch einfacher.
Dazu packst Du ein SectionsBox Stack in einen SectionsPro Stack. Dem SectionsPro-Stack gibst Du dann eine fixe Höhe vor.

Bildschirmfoto 2017-01-04 um 07.40.53.png1499×612 345 KB

Den Position Mode von SectionsBox setzt Du dann auf Floating (CaptionMode), relativ zum SectionsPro Parent.

Bildschirmfoto 2017-01-04 um 07.41.35.png1497×483 325 KB

Nun noch ein Background Child Stack anlegen, indem Du auf das blaue Plus-Symbol vom SectionsBox Stack klickst.
Einstellungen z.B. wie hier:

Bildschirmfoto 2017-01-04 um 07.41.16.png1497×396 317 KB

Mit der Einstellung “Center Content” kannst Du nun wählen, an welcher Position sich das Bild beim Skalieren ausrichten soll.

Beispielprojekt:
https://jochenabitz.de/cloud/index.php/s/QgJjqqtfbgz19Mm

Lieben Gruß
Jochen

1 Like
6

Ich möchte mich nochmal ganz herzlich für die Tipps bedanken.
Letztendlich habe ich es aber nicht so hinbekommen, wie ich es wollte, spätestens wenn ich das Ganze in ein Partial gepackt habe, war die Darstellung “im A…”.
Also habe ich mich für eine andere Art der Hintergrunddarstellung entschieden und mein Hintergrundbild ganz einfach in meine Site Styles gepackt.