Seite 1 von 1
Ein Hintergrundbild gesamte Seite
Verfasst: Sa 15. Jul 2023, 14:58
von scherenschlag
Moin.
Da ich es schon lange nicht mehr gebraucht/probiert habe, denke ich mal dass ich mich verhaspel...
Es ist nur eine Testseite.
Und ich versuche, nach Tommys Anleitung, ein Hintergrundbild einzufügen. Über die ganze Seite.
Schaut doch mal auf
https://www.tsad17.de/sonne2023
Also hinter dem Kneipenbild sollte es schon mal zu sehen sein. Die anderen roten Blöcke muss ich dann noch auf transparent setzen. Kommt dann noch.
Kann mir mal wieder jemand auf die Sprünge helfen?
Habe übrigens MBR deswegen mal angeschrieben. Ob das vielleicht nicht mal eine Überlegung wert wäre so eine Gesamtbild Möglichkeit über alle Blöcke oder mehrere anzubieten. Haben sich für die Anregung bedankt und wollen mal schauen.
Re: Ein Hintergrundbild gesamte Seite
Verfasst: Sa 15. Jul 2023, 15:40
von Rancher
Ich sehe kein Hintergrundbild.
Re: Ein Hintergrundbild gesamte Seite
Verfasst: Sa 15. Jul 2023, 15:56
von scherenschlag
Na ja. Das ist ja mein Problem.
Das habe ich bei End of Body Code eingefügt:
Code: Alles auswählen
<script src="assets/backstretch/jquery/jquery.min.js"></script>
<script src="./backstretch/jquery.backstretch.js"></script>
<script>
$.backstretch([
"./backstretch/images/sonne.jpg"
], {
fade:0
});
</script>
Alles hochgeladen. Auch auf den Server. Und wie du siehst, sieht man nichts.....

Re: Ein Hintergrundbild gesamte Seite
Verfasst: Sa 15. Jul 2023, 16:54
von Tommy Herrmann
... ich habe gerade eine Freundin im Pool und wir grillen auch gleich. Melde mich morgen wieder.
Da fehlen schon mal beide Dateien am Server:
Code: Alles auswählen
<script src="assets/backstretch/jquery/jquery.min.js"></script>
<script src="./backstretch/jquery.backstretch.js"></script>
Re: Ein Hintergrundbild gesamte Seite
Verfasst: So 16. Jul 2023, 04:22
von Tommy Herrmann
Moin,
gucke bitte nochmals hier:
https://www.mobirise-tutorials.com/Port ... round.html
... oder auch hier habe ich diese "Fullscreen Background" Anwendung von "
Backstretch" mal eingebaut:
https://www.mobirise-tutorials.com/Lawy ... round.html
Bitte lese meine Tutorials dazu nochmals aufmerksam ...
... denn ab "Mobirise5" (Bootstrap5) - was Du ja verwendest - fehlt das Framework "jQuery" in Mobirise weil Bootstrap seit seiner Version 5 nur noch mit dem regulären (Vanilla) JavaScript arbeitet. Daher muss das dann auch händisch wieder eingebaut werden, denn die Anwendung "Backstretch" benötigt zwingend "
jQuery", siehe auch hier:
https://www.mobirise-tutorials.com/Mobi ... ackstretch
Du benötigst also neben diesen Links (die Du schon eingebaut hast) natürlich auch die Dateien "
jquery.min.js" und "
jquery.backstretch.js" auf die verlinkt wird, genau in den in den Links
angegebenen Verzeichnissen am Server und auch im lokalen Verzeichnis der Publizierung, damit das auch lokal schon funktioniert:
<script src="assets/backstretch/jquery/jquery.min.js"></script>
<script src="./backstretch/jquery.backstretch.js"></script>
Diese
Dateien fehlen - Du hast sie
nicht hochgeladen!
Solltest Du die
jQuery-Datei nicht am Computer haben, kannst Du Dir diese bei mir auch downloaden:
https://www.mobirise-tutorials.com/Mobi ... ery.min.js
> Datei > Speichern unter
Weiterhin verlinkst Du ja auch ganz richtig auf Dein
Hintergrundbild für die Anwendung "Backstretch":
Code: Alles auswählen
<script>
$.backstretch([
"./backstretch/images/sonne.jpg"
], {
fade:0
});
</script>
... aber auch das
fehlt noch am Server (und wahrscheinlich auch lokal) im Verzeichnis "
backstretch/images/", das Du natürlich auch erst händisch anlegen musst und die fehlenden Dateien musst Du dann alle mit einem FTP-Programm wie "FileZilla" auf den Server kopieren.
Wie Du hier am Link zu Deiner Seite sehen kannst, fehlt das Bild:
https://www.tsad17.de/Sonne2023/backstr ... /sonne.jpg
Du schreibst zwar "alles hochgeladen" - nur ist nichts am Server hochgeladen worden oder in ein falsches Verzeichnis

Re: Ein Hintergrundbild gesamte Seite
Verfasst: So 16. Jul 2023, 09:03
von scherenschlag
Moin.
So.Ich fange nochmal ganz von vorne an.
Ich glaube ich habe jetzt zuviel an einer Seite rumgeschraubt.
Melde mich, wenn ich was sehen kann...

Re: Ein Hintergrundbild gesamte Seite
Verfasst: So 16. Jul 2023, 12:15
von scherenschlag

Ich traue mich gar nicht.....
Das habe ich eingegeben im End of body code:
Code: Alles auswählen
<script src="backstretch/jquery/jquery.min.js"></script>
<script src="./backstretch/jquery.backstretch.js"></script>
<script>
$.backstretch([
"./backstretch/holz.jpg"
], {
fade:0
});
</script>
Alles auf Transparent gesetzt.
Ich habe die jquery Dateien und das Bild Lokal in einem extra Backstretch Ordner. Nicht im Assets Ordner.
Ich habe es per File Zilla hochgeladen auf den Server. Die Dateien sind auch "zu sehen"....
Aber wenn ich auf
www.tsad17.de gehe, ist da nichts zu sehen. Kein Holzhintergrund....
Tommy, ich schaue mir seit drei Tagen dein TuT an. Und versuche es auch so vorzugehen.
Ich mache es ja auch nicht zum ersten Mal. Nur schon lange nicht mehr genutzt.
Was mache ich bloß dauernd falsch? Fehlt da ein Punkt? Habe ich einen Punkt zuviel?
Hilfe...

Re: Ein Hintergrundbild gesamte Seite
Verfasst: So 16. Jul 2023, 12:27
von Tommy Herrmann
Du kommst der Sache aber näher
Die Datei "
jquery.backstretch.js" gibt es inzwischen
http://www.tsad17.de/backstretch/jquery.backstretch.js
Die jQuery-Datei "
jquery.min.js" gibt es jetzt auch
http://www.tsad17.de/backstretch/jquery.min.js
... letztere hast Du aber
falsch verlinkt
<script src="backstretch
/jquery/jquery.min.js"></script>
Schreibe anstelle dessen das richtig - mit dem korrekten Pfad zu der Datei:
Das Bild ist jetzt auch da
http://www.tsad17.de/backstretch/holz.jpg
Wahrscheinlich geht es sobald der Link zur jQuery-Datei richtig ist. Vergiss dann nicht den
Browser-Cache zu löschen oder mit der Tastenkombination zu erneuern
Strg + F5
Wenn Du einen Laptop nutzt mit einer "Fn" (Funktion) Taste, dann zwingend:
Strg + Fn + F5
Re: Ein Hintergrundbild gesamte Seite
Verfasst: So 16. Jul 2023, 12:39
von Tommy Herrmann
ja - jetzt geht es
... der Hintergrund ist aber so viel zu dominant - da musst Du Dir noch was anderes überlegen. Wie man das einbaut weißt Du jetzt aber

Re: Ein Hintergrundbild gesamte Seite
Verfasst: So 16. Jul 2023, 12:41
von scherenschlag
Verflixt und zugenäht....
Ich wusste es. Irgendetwas ist zuviel (oder zu wenig).
Hätte ich wahrscheinlich in tausend Jahren nicht gemerkt.
Also: Tausend Dank...
Ja klar. Der Hintergrund war nur um einen Hintergrund zu haben. Den richtigen muss ich noch entwickeln.
Re: Ein Hintergrundbild gesamte Seite
Verfasst: So 16. Jul 2023, 12:45
von Tommy Herrmann
Wenn man fremde Skripte einbaut und etwas geht nicht, dann ist immer das Erste, dass man die Verweise (Links) genau prüft. Stimmt der Pfad und der Dateiname?
Das
Hintergrundbild ist aber auch viel zu groß und lädt daher viel zu langsam.
Es sollte maximal 1920px breit sein (nicht 4800px) und keine
19.2MB Dateigröße
Meines hat gerade mal 500KB
Verwende mal möglichst die Bilder von Pixabay aus Mobirise, die haben schon ein optimiertes Format und sind auch kostenlos.
Hier kannst Du auch dierekt in Pixabay mal suchen und auch gleich downloaden:
https://pixabay.com/de/
Re: Ein Hintergrundbild gesamte Seite
Verfasst: So 16. Jul 2023, 13:38
von scherenschlag

Alles klar...
Habe auch sofort eines gefunden.
Re: Ein Hintergrundbild gesamte Seite
Verfasst: So 16. Jul 2023, 13:42
von Tommy Herrmann
ja - das passt doch
