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:
Fragment.JPG


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>
End_of_Body_Code.JPG


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

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:

Inside-Head-Code.JPG

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.