Ein Hintergrundbild gesamte Seite

[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.

[Rancher]

Ich sehe kein Hintergrundbild.

[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.....

[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>

[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

[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...

[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...

[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:

Code: Alles auswählen

<script src="backstretch/jquery.min.js"></script>

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

[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

[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.

[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/

[scherenschlag]

Alles klar...
Habe auch sofort eines gefunden.

[Tommy Herrmann]

ja - das passt doch