Wie bekomme ich den wechselnden Hintergrund hin
Wie bekomme ich den wechselnden Hintergrund hin
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
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
Gruß Volker
- Tommy Herrmann
- Site Admin
- Beiträge: 5744
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wie bekomme ich den wechselnden Hintergrund hin
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:
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%).
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">
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%).
Re: Wie bekomme ich den wechselnden Hintergrund hin
Hi Tommy,
genau so gehts Danke Dir für den Tipp. Werde ich jetzt in meine neue Seite einbauen.
genau so gehts Danke Dir für den Tipp. Werde ich jetzt in meine neue Seite einbauen.
Gruß Volker
- Tommy Herrmann
- Site Admin
- Beiträge: 5744
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wie bekomme ich den wechselnden Hintergrund hin
Moin,
falls Du das realisierst und hin bekommst, würde mich das Resultat interessieren.
falls Du das realisierst und hin bekommst, würde mich das Resultat interessieren.
Re: Wie bekomme ich den wechselnden Hintergrund hin
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.
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.
Gruß Volker
- Tommy Herrmann
- Site Admin
- Beiträge: 5744
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wie bekomme ich den wechselnden Hintergrund hin
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:
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
- Site Admin
- Beiträge: 5744
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wie bekomme ich den wechselnden Hintergrund hin
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:
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:
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:
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">
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:
Re: Wie bekomme ich den wechselnden Hintergrund hin
Tommy Du bist halt ein Käpsele
Super !! Werde ich so einbauen.
Super !! Werde ich so einbauen.
Gruß Volker
- Tommy Herrmann
- Site Admin
- Beiträge: 5744
- Registriert: So 6. Dez 2020, 07:37
- Wohnort: Berlin
- Kontaktdaten:
Re: Wie bekomme ich den wechselnden Hintergrund hin
... ich habe jetzt noch einen anderen Hintergrund gewählt:
https://www.mobirise-tutorials.com/Test ... .html#Auto
... und zusätzliche Breakpoints eingesetzt:
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;
}
}
}
Wer ist online?
Mitglieder in diesem Forum: Ahrefs [Bot] und 19 Gäste