Wie bekomme ich den wechselnden Hintergrund hin

Allgemeine Fragen
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Wie bekomme ich den wechselnden Hintergrund hin

Ungelesener Beitrag von Volker »

Hier auf der Seite : https://carpicsediting.com/
Ist oben links ein Auto und nur die Hintergründe wechseln anscheinend
car_hintergrund.png
Kann mir jemand sagen wie ich das in Mobirise hin bekomme ? Gefällt mir nämlich :D
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie bekomme ich den wechselnden Hintergrund hin

Ungelesener Beitrag von 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


Slider mit Logo.JPG


... 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):


Caption als Bild.JPG


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:


Slider-Werkzeuge.JPG


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%).
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Wie bekomme ich den wechselnden Hintergrund hin

Ungelesener Beitrag von Volker »

Hi Tommy,

genau so gehts :D Danke Dir für den Tipp. Werde ich jetzt in meine neue Seite einbauen.
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie bekomme ich den wechselnden Hintergrund hin

Ungelesener Beitrag von Tommy Herrmann »

Moin,

falls Du das realisierst und hin bekommst, würde mich das Resultat interessieren.
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Wie bekomme ich den wechselnden Hintergrund hin

Ungelesener Beitrag von 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 :D

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.
slide.png
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie bekomme ich den wechselnden Hintergrund hin

Ungelesener Beitrag von 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;



Position unten.JPG



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:


Mustang.JPG
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie bekomme ich den wechselnden Hintergrund hin

Ungelesener Beitrag von Tommy Herrmann »

Moin Volker,

ich habe mir mal erlaubt Deinen Mustang zu klauen :D

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


Mustang.JPG

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">


Code-Editor.JPG



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



mustangklein.png


Hintergrund1a.jpg


Hintergrund2a.jpg


Hintergrund3a.jpg
Benutzeravatar
Volker
Moderator
Moderator
Beiträge: 828
Registriert: Sa 12. Dez 2020, 22:35
Wohnort: Wildberg
Kontaktdaten:

Re: Wie bekomme ich den wechselnden Hintergrund hin

Ungelesener Beitrag von Volker »

Tommy Du bist halt ein Käpsele :D
Super !! Werde ich so einbauen.
Gruß Volker
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Wie bekomme ich den wechselnden Hintergrund hin

Ungelesener Beitrag von Tommy Herrmann »

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

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



Sceenshot Slider.JPG


Screenshot-2.JPG



... 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;
    }
  }
}
Antworten

Wer ist online?

Mitglieder in diesem Forum: Ahrefs [Bot] und 19 Gäste