Idee für einen Block: Hintergrund für mehrere Blöcke

[stobi_de]

Nur eine Idee:
Es wird im Mobi-Forum sehr oft nach einen Hintergrundbild gefragt, was sich über mehrere Blöcke erstreckt. Kein Hintergrundbild für die ganze Seite, so dass ggf. auch mehrere Bilder benutzt werden können: Drei Blöcke mit Elefanten-Hintergrund, dann 3 Blöcke mit Giraffen-Hintergrund...halt sowas.

Bislang mache ich das entweder so, dass ich Blöcke zusammenbaue, was recht aufwändig ist, oder ich mache in PHP ein öffnendes DIV mit einem Hintergrund und ein schließendes DIV ein paar Blöcke später (erst einmal vor langem getestet). Mit PHP bekommt Mobi nicht mit, dass der Code in dem betreffenden Block nicht vollständig ist.
Die Divs dazwischen brauchen dann einen transparenten Hintergrund - also so wirklich vollautomatisch kann da nichts gehen.
Aber ein konfigurierbarer Open-Block und der entsprechende Close-Block wären ganz nett - und nicht einfach, denn Mobi macht ja zu jedem Block noch eine ID dazu.

Hier mal ein Beispiel eines zusammengebauten Blocks - das andere finde ich nicht mehr.
https://www.afripix.de/nase-3/

Frank

[Tommy Herrmann]

Moin,

das sollte doch eigentlich ganz simpel sein.

Hier mal eine Beispielseite mit der Bootstrap class="sticky-top" am <section> Tag:

https://www.mobirise-tutorials.com/Tuto ... y-Top.html

Gerade habe ich es mal zunächst lokal probiert:

Ich habe einfach im folgenden Block den Hintergrund transparent gestellt, auf diese Art bleibt das Bild vom ersten Block beliebig lange stehen - bis ich dem nächsten Block auch wieder die class="sticky-top" mitgebe.

[stobi_de]

So ist meine Firmenseite ja auch gebaut.
Aber schau mal die Nasenseite an, das ist schon was anders.

[Tommy Herrmann]

Auf dieser Seite mit einem Video (anstelle vom Bild) ist das ja eigentlich schon so:

https://www.mobirise-tutorials.com/Tuto ... Video.html

Das Video steht hinter ca. 4 unterschiedlichen Blöcken. Ist doch nichts anderes als bei Deinen Nasen ...

Ich habe ja zur Demo extra die unterschiedlichen Blöcke auch so dargestellt, hätte ich es wie bei den Nasen ganz transparent gehalten, würde der Eindruck von einem ganz großen Block entstehen.

[stobi_de]

Nicht wirklich: das Nasenbild ist erheblich höher. Dadurch verstärkt sich thematisch der Eindruck, dass diese Blöcke irgendwie zusammengehören.
Meiner Meinung nach was ganz anderes als die Sticky-Top Geschichte

[Volker]

Ich habe es mal so gemacht:

3 Artikel Blöcke untereinander gesetzt und jeweils folgende Dinge geändert:
Den original section Tag der so lautet:

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content">

durch den hier in jedem Block ersetzt:

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content" style="background-image: url('https://www.niederastroth.de/galerien/Bilder/agriculture-2179333.jpg'); 
           background-size: cover; 
           background-position: center;
           background-attachment: fixed;">

Einfach - aber genial

Bild liegt also auf dem Server - würde aber auch so gehen

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content" style="background-image: url('assets/images/agriculture-2179333.jpg'); background-size: cover; background-position: center; background-attachment: fixed;">

DEMO: https://www.niederastroth.de/block3er/

[Tommy Herrmann]

Volker,

hast Du meine Seiten mit den Bildern überhaupt mal angeguckt? Du machst doch nichts anderes - nur schreibst Du plötzlich das Hintergrundbild an das <section> Tag, das ist zwar nicht falsch aber eher abartig. Das gehört in den Body vom Block oder in die CSS.

... UND - fixed geht nicht am iPhone. Da gibt es ein Dutzend Workarounds, hier mal eines:

https://julia-vicentini.de/blog/backgro ... orkaround/

Stobis Frank hat das komplett anders gemacht, denn die Höhe von seinem Bild ist entschieden höher als ein Block. Warum er das so macht weiß ich nicht, denn der Effekt ist fast gleich.

[Volker]

Ich hab kein Iphone

War eine Idee Tommy, die noch weiter ausgebaut werden kann ...

Muss dann für Iphone eben gefixt werden - wenns sein muss

Klar kenn ich Deine Tuts ( fast ALLE )

Hier ist aber z.B. kein Java Script nötig. So wie ich - Quick & dirty ...Andere nennen es Abartig


Keine CSS, Kein Java Kein NIX nur den section Tag aufgepimt

[Volker]

Hier der FIX für Iphone:

Dann muss CSS rein:

Code: Alles auswählen

/* Desktop: Fixed Background */
.bg-image-section {
    background-attachment: fixed;
}

/* Mobile: NormalesScrolling */
@media (max-width: 768px) {
    .bg-image-section {
        background-attachment: scroll !important;
    }
}

Und der Section Tag dann so:

Code: Alles auswählen

<section data-bs-version="5.1" class="content5 bg-image-section" group="Content"
    mbr-style="{'background-image': 'url(\'' + bgImage + '\')', 
                'background-size': 'cover', 
                'background-position': 'center'}">

[Tommy Herrmann]

Keine CSS, Kein Java Kein NIX nur den section Tag aufggepimt

… weiß jetzt nicht was Du sagen willst

Natürlich ist dafür kein JavaScript notwendig - wie kommst Du darauf? Wieso keine CSS? Das geht nur mit CSS, die Du einfach inline an das <section> Tag schreibst.

Das Problem was Du kreierst betrifft ja nicht nur das iPhone sondern alle iOS Geräte.

Meine Lösung benötigt kein Fix.

[Volker]

Ich hab von dem hier geschrieben : https://www.mobirise-tutorials.com/Tuto ... Video.html

Das kommt Franks Idee ja am nächsten.

Das hier : https://www.mobirise-tutorials.com/Tuto ... y-Top.html
hat ja gar nichts damit zu tun und kommt dem ja noch nicht mal nahe

[Tommy Herrmann]

Keine Ahnung was Du sagen willst

Beide Seiten von mir sind quasi identisch - nur zeige ich auf der einen Seite Bilder und auf der anderen Videos. Die Technik ist identisch (geklonte Seiten).

[Volker]

Geht auch :

das in die CSS:

Code: Alles auswählen

background-size: cover;
background-position: center;
background-attachment: fixed;

Section Tag dann so:

Code: Alles auswählen

<section data-bs-version="5.1" class="content5" group="Content" style="background-image: url('https://www.niederastroth.de/galerien/Bilder/agriculture-2179333.jpg'); ">

Ist aber Jacke wie Hose. Dazu dann eben noch den Fix für Iphone in die CSS uns gut ist.

[Volker]

Ich hab es so verstanden, das Frank mehrere Blöcke untereinander legen möchte mit einem durchgehenden Hintergrund Bild.
DAS habe ich gebaut - auf meine Art

Wie Du auf meiner Testseite siehst kommen da 3 Artikelblöcke untereinander mit dem selben Bild.(was aber eins bleibt)
Dann kommt der original Block, den ich dafür genommen habe.

Dann kommt ein Block den ich mit Overlay und Bildupload gebaut habe.
Dann kommt ein Block der overlay im selection Tag hat ( eine weitere Möglichkeit)

Dann kommt ein neues Bild ebenfalls mit 3 Blöcken untereinander.

Sehe ich bei Dir nicht Tommy - sorry

[Tommy Herrmann]

sorry - kann ich auch nicht ändern. Musst Du mal richtig gucken.

Genauso ist es auch bei mir. Vielleicht siehst Du es nicht, weil die unterschiedlichen Blöcke recht raffiniert ineinander greifen.

Das ist eine uralte Anwendung - so wie auch Frank schon Dutzende seiner Webseiten erstellt hat. Dadurch sind wir damals auch nur auf die Erkenntnis gestoßen, dass es mit dem iOS Probleme gibt - das ist Jahre her.

Da hatten wir auch noch Backstretch verwendet:

https://www.mobirise-tutorials.com/Port ... round.html

oder:

https://www.mobirise-tutorials.com/Lawy ... round.html

oder auch so etwas:

https://www.mobirise-tutorials.com/Busi ... Video.html

[Volker]

JA DAS ist genau das : https://www.mobirise-tutorials.com/Port ... round.html

Und das auch hier : https://www.mobirise-tutorials.com/Lawy ... round.html

Aber das kennt Frank ja sicher auch

Dann weiß ich auch nicht was Frank will Aber wird er uns sicher noch sagen

[Volker]

Ich weiß nicht ob Apple was gemacht hat, aber mit dem online Tool hier: https://bluetree.ai/screenfly/ lädt die Testseite einwandfrei Auf Iphone und Ipad

OK, nicht auf allen Ipads wie ich sehe

Komisch jetzt gehts nicht mehr Aber ganz ehrlich ? Man kann ja alles lesen, geht das Bild eben mit nach oben - pups egal für mich

[stobi_de]

Das Apple-Problem, was Tommy und ich mal vor 2 oder 3 Jahren durchgekaut hatten, basierte auf dem css Befehl:

background-size:cover

Wenn ich mich recht erinnere, was das Cover ein Problem.

Es mag Dir ja pupsegal zu sein, aber wenn ein Kunde sehr apple-lastig ist, dann kann ich das nicht verwenden.
Und die stapelnden Screens mit sticky-top sind meiner Idee nicht ähnlich, es ist völlig anders, nicht besser, nicht schlechter - anders.
Du kannst ein Akkordeon ja auch mit einem Tab machen und dann sagen: ist doch das Gleiche. Nee, ist es nicht!

Ich habe gestern noch etwas mit der Idee vom öffnenden DIV vor einer Gruppe von Blocks und dem schließenden danach gespielt. Es geht nicht wegen Mobirise.
Mobirise generiert nur Code, wenn es eine Section gibt
Dann steht das öffnende DIV innerhalb einer (Section)...(DIV)....(/Section) und das geht natürlich nicht.
Somit: Idee gescheitert - früher ging das mal, gab sogar vom User DeltaPi im Mobi-Forum eine Anleitung dazu.