Seite 1 von 1
Backstretch - EIN Bild als Hintergrund
Verfasst: Sa 7. Aug 2021, 14:13
von scherenschlag
Moin.
Da ist es wieder. Mein Brett vor'm Kopf.
Ich versuche verzweifelt ein Bild als (gesamt) Hintergrund einzufügen. Backstretch eben.
Ich habe das TUT von Tommy vor mir. Und arbeite danach. Das schlimme: Ich mache das nicht zum ersten Mal.
Es klappt nicht. Ich bekomme es einfach nicht hin.
Ich weiß nicht was ich falsch mache.
Kurze Starthilfe bitte erwünscht......
Re: Backstretch - EIN Bild als Hintergrund
Verfasst: Sa 7. Aug 2021, 14:27
von Tommy Herrmann
Moin,
na ein Bild hat dieses JavaScript:
Code: Alles auswählen
<script>
$.backstretch([
"./backstretch/wellen.jpg"
], {
fade: 750
});
</script>
... dabei habe ich das Bild "wellen.jpg" in ein von mir (im Stammverzeichnis des Projektes) erstelltes Verzeichnis:
backstretch
kopiert. Es blendet hier innerhalb von 750 Millisekunden ein.
https://www.mobirise-tutorials.com/Port ... round.html
Du musst natürlich die
Hintergrundfarbe von Mobirise entfernen, bzw.
transparent machen - wie in meinem Tutorial beschrieben.
background-color: transparent;
Es wäre besser, wenn Du immer gleich einen Link zu der Problemseite postest, damit man im Quelltext gucken kann, was falsch sein könnte.
Re: Backstretch - EIN Bild als Hintergrund
Verfasst: Sa 7. Aug 2021, 14:54
von scherenschlag
Genau das TUT von Dir habe ich ja als Vorlage genommen.
Ich muss aber irgendwo einen (Gedanken-) Fehler machen.
Kann es sein dass man das Ergebnis erst sieht wenn man es FTP publiziert hat?
Ist im Moment noch so eine interne Übungsseite, die ich eigentlich nicht publiziere.
Deshalb kein Link.
Re: Backstretch - EIN Bild als Hintergrund
Verfasst: Sa 7. Aug 2021, 16:10
von scherenschlag
Habe die Testseite mal hochgeladen.
https://www.tsad17.de/woodm4
Re: Backstretch - EIN Bild als Hintergrund
Verfasst: Sa 7. Aug 2021, 16:51
von Tommy Herrmann
Du hast da etliche Fehler:
Fehler 1):
was ist das für ein Fragment -
raus damit - das steht falsch im Bereich "
Inside <head> code":
Code-Rest hat geschrieben: $('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});
Das raus:
Fehler 2:
Das Script zum Bild liegt an der
falschen Stelle, das gehört in die Seiteneinstellungen (Zahnrad) in den Bereich:
"
End of <body> code:"
außerdem
Fehler 3:
fehlt der
Verweis zum eigentlichen
jQuery Skript von Backstretch vollkommen (das
Skript selbst hast Du ja ganz richtig bereits an den Server kopiert):
<script src="./backstretch/jquery.backstretch.js"></script>
Das gehört also alles zusammen in die
Seiteneinstellungen am Zahnrad (siehe mein Screenshot unten) in den Bereich:
"
End of <body> code:"
Code: Alles auswählen
<script src="./backstretch/jquery.backstretch.js"></script>
<script>
$.backstretch([
"./backstretch/hintergrund.jpg"
], {
fade: 0
});
</script>
Wolltest Du das auch beim lokalen Publizieren schon sehen, müsstest Du natürlich das Verzeichnis "backstretch" mit dem jQuery-Sript und dem Bild auch im Verzeichnis der lokalen Publizierung anlegen und nicht nur am Server.
Re: Backstretch - EIN Bild als Hintergrund
Verfasst: So 8. Aug 2021, 11:44
von scherenschlag
Moin Tommy.
Keine Ahnung wie ich an das Fragment gekommen bin. Habe die Blöcke eigentlich neu aufgezogen.
Rausgeschmissen.
Und da ist auch mein Denkfehler (Brett vor'm Kopf)
Ich habe den Code immer unter After <body> Code eingefügen anstatt Before </body> code eingefügt.
Habe mich von dem Wort After verleiten lassen
Tausendmal drauf geschaut. Tausendmal nicht gesehen.
Danke. Das war es.

Re: Backstretch - EIN Bild als Hintergrund
Verfasst: So 8. Aug 2021, 12:33
von Tommy Herrmann
Moin,
da ist aber immer noch dieses Code-Fragment im Bereich "
Inside <head> Code" der Seite, also am Zahnrad in den "Seiteneinstellungen" (nicht in irgendeinem Block).
Das muss raus (auch wenn jetzt alles funktioniert), denn dadurch bekommst Du ein
nicht valides </head> Tag. Im Screenshot markiert:
Re: Backstretch - EIN Bild als Hintergrund
Verfasst: So 8. Aug 2021, 14:51
von scherenschlag
Alles klar. Ich hatte es zwar, so dachte ich, rausgeschmissen.
Aber ich kille jetzt die ganze Seite. War eh nur zum zeigen.
Danke dir.