Backstretch - EIN Bild als Hintergrund

Allgemeine Fragen
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Backstretch - EIN Bild als Hintergrund

Ungelesener Beitrag 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......
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5867
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Backstretch - EIN Bild als Hintergrund

Ungelesener Beitrag 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.
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Backstretch - EIN Bild als Hintergrund

Ungelesener Beitrag 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.
scherenschlag
MBR 5.9.17
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Backstretch - EIN Bild als Hintergrund

Ungelesener Beitrag von scherenschlag »

Habe die Testseite mal hochgeladen.

https://www.tsad17.de/woodm4
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5867
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Backstretch - EIN Bild als Hintergrund

Ungelesener Beitrag 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.
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Backstretch - EIN Bild als Hintergrund

Ungelesener Beitrag 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:
scherenschlag
MBR 5.9.17
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5867
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Backstretch - EIN Bild als Hintergrund

Ungelesener Beitrag 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
scherenschlag
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 257
Registriert: Di 15. Dez 2020, 11:46
Wohnort: Dortmund

Re: Backstretch - EIN Bild als Hintergrund

Ungelesener Beitrag 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.
scherenschlag
MBR 5.9.17
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 133 Gäste