Wie bekomme ich den wechselnden Hintergrund hin

[Volker]

Hier auf der Seite : https://carpicsediting.com/
Ist oben links ein Auto und nur die Hintergründe wechseln anscheinend

Kann mir jemand sagen wie ich das in Mobirise hin bekomme ? Gefällt mir nämlich

[Tommy Herrmann]

Moin Volker,

mir kam gerade der Gedanke, dass man ja vielleicht einen ganz normalen Mobirise-Slider, so wie er ist, verwenden kann und einfach das "Caption" (Überschrift) dafür missbraucht.

Hier habe ich mal mein "Mobirise-Tutorials-Logo" beispielhaft über den Slider gelegt:

https://www.mobirise-tutorials.com/Test ... content7-y

... also einfach anstelle des "Caption-Textes" mein <img Tag > an jedem Slider-Bild eingesetzt:

Code: Alles auswählen

<img style="max-width: 150px; " src="https://www.mobirise-tutorials.com/Testseiten/Testseite-Blank/logo-mobirise-250x250.png" alt="Logo">

Ich habe also dort im "Code Editor" einfach mal mein Logo anstelle der Überschrift eingesetzt und die Position in der CSS geändert (im Screenshot markiert):

Du könntest auch noch den "Text" einschalten und dann unter dem Bild noch eine Beschreibung hinzufügen, die man gleich oder bei jedem Slider-Bild auch anders gestalten könnte:

Im Grunde wird das in Deinem Beispiel nicht viel anders gemacht sein. Man müsste eben den oberen Teil (bis zur Straße) vom Auto freistellen, damit der Hintergrund-Slider im freigestellten Bereich zu sehen ist und die Breite des Bildes über den gesamten Slider erstellen (wahrscheinlich auf 100%).

[Volker]

Hi Tommy,

genau so gehts Danke Dir für den Tipp. Werde ich jetzt in meine neue Seite einbauen.

[Tommy Herrmann]

Moin,

falls Du das realisierst und hin bekommst, würde mich das Resultat interessieren.

[Volker]

Ich bastel gerade Tommy, aber habe natürlich noch Probleme das Bild weiter runter zu bekommen und auch die Größe will noch nicht so ganz klappen

https://kfz-fotograf.de/test1/

1. Muss das Auto weiter runter
2. Sollte es auch größer werden. Hab keine Ahnung was ich da eingeben soll. style="max-width: 150px hab ich auf 600 und 800 und 1200 geändert aber ohne Erfolg.

Komischerweise habe ich das Auto jetzt auch wenn ich in MB auf den Slider klicke, als Bild. Obwohl es ja nur im Code Editor als URL eingetragen wurde.

[Tommy Herrmann]

Du müsstest ja erst einmal das Bild breiter als den Slider aufbauen, um es dann auf maximale Breite von 100% darstellen zu können.

Nach unten schieben kannst Du es mit z.B. einem negativen Außenabstand:

margin-bottom: -120px;

Der Slider-Hintergrund ist ja jetzt 1068px breit, das Bild vom Auto aber nur 747px.

Das Auto müsste also größer sein und wahrscheinlich dann flacher.

Mit anderen Worten das Auto sollte in der Größe bleiben aber der Hintergrund müsste auf 1068px Breite aufgezogen werden, damit der uneter Teil des Sliders verdeckt bleibt. Dann muss das wahrscheinlich auch noch zentriert werden. Nimm zum Testen dann das "max-width" raus und ersetze es mit "width".


Die Variante mit dem freigestellten Mustang sieht doch auch gut aus:

[Tommy Herrmann]

Moin Volker,

ich habe mir mal erlaubt Deinen Mustang zu klauen

Das muss man selbst probieren, so theoretisch ist das nicht machbar.

Ich habe nun festgestellt, dass der untere Bereich (Boden hinter Auto) im Hintegrundbild sein muss - dann klappt das auch.

https://www.mobirise-tutorials.com/Test ... .html#Auto

Das Auto mit seiner Bildbreite von 652px:

Code: Alles auswählen

<img style="max-width: 652px" src="https://www.mobirise-tutorials.com/Testseiten/Testseite-Blank/mustangklein.png" alt="Mustang" title="Mustang">

Dann habe ich das freigestellte Auto noch mit dieser CSS etwas nach unten verschoben, am Handy und Tablet etwas mehr und dort auch die Schrift entfernt:

Code: Alles auswählen

.carousel-caption {
  margin-bottom: -2vh;
}
@media (max-width: 992px) {
  .carousel-caption {
    margin-bottom: -4vh;
    .mbr-section-text {
      display: none;
    }
  }
}

Um das auch am Handy anzuzeigen habe ich die Bootstrap class="d-none d-md-block" entfernt (Zeile über <h5> Tag):

<div class="carousel-caption d-none d-md-block" mbr-if="showCaption || showText">

also dann so:

<div class="carousel-caption" mbr-if="showCaption || showText">

Verwendete Dateien, wobei ich mir die "Strasse" sehr viel schöner vorstellen könnte:

[Volker]

Tommy Du bist halt ein Käpsele
Super !! Werde ich so einbauen.

[Tommy Herrmann]

... ich habe jetzt noch einen anderen Hintergrund gewählt:

https://www.mobirise-tutorials.com/Test ... .html#Auto

... und zusätzliche Breakpoints eingesetzt:

Code: Alles auswählen

.carousel-caption {
  margin-bottom: -5vh;
}
.mbr-section-text {
  margin-top: -40px;
}
@media (max-width: 1400px) {
  .carousel-caption {
    margin-bottom: -4vh;
  }
}
@media (max-width: 1200px) {
  .carousel-caption {
    margin-bottom: -6vh;
  }
}
@media (max-width: 992px) {
  .carousel-caption {
    margin-bottom: -5vh;
    .mbr-section-text {
      display: none;
    }
  }
}