[phpBB3] Hintergrundbild strecken

Hallo zusammen,

ich arbeite momentan an einem Design meines Forums. Dabei sind nun erste Probleme aufgetreten, die ich nicht mehr ohne Hilfe lösen kann.

Das Hintergrundbild meines Forums wird sowohl senkrecht als auch waagerecht wiederholt.
Sämtliche Anleitungen, die ich über die Hilfeaktion gefunden habe, haben mich nicht weitergebracht bzw. brachten kein überzeugendes Ergebnis.
Entweder war der Hintergrund dann komplett grün oder aber die Formatierung der Seite ging verloren.

Was kann ich nun machen, damit das Hintergrundbild gestreckt dargestellt wird?

LG AnK

Du solltest dir bitte das hier anschauen:
https://hilfe.forumieren.com/t26288-tutorial-hintergrundbild-an-verschiedene-bildschirmauflosungen-anpassen

Ich denke, das das die einzig Praktikable Lösung für dich ist, da es bis heute noch nicht möglich ist, ein Hintergrundbild Variabel anzupassen.

Diese Anleitung habe ich gestestet. Es hat sich leider nichts verändert.

Ich habe nun nochmals die Anleitung befolgt. Das Ergebnis: Das Bild ist weg, stattdessen ist alles grün.

Woran machst du fest, das es nicht funktioniert?
Da dieses Tuto schon sehr alt ist, ist auch die Lösung, wie du das Script in dein Forum einsetzen sollst, nicht mehr up to Date.
Du solltest das Script inzwischen direkt über die Java Script Verwaltung einsetzen.
Das ersetzt dir Schrit 1 und 2 der Beschreibung.
Du solltest auch dein Hintergrundbild aus der Bilderverwaltung entfernen.
Das es Funktioniert, kann ich dir versichern. Dieses Script mit den verschiedenen Hintergrund Grafiken läuft bis heute in meinem Testforum.

Wo hast du dabei die Probleme?

Würdest du bitte den Inhalt deines Script bitte mal hie Posten?
Setze das bitte in

Code:

[code][/code]

Das ist alles was ich gefunden habe. Weiß allerdings nicht, ob das der richtige ist.

Wie würde das denn funktionieren, wenn ich den Code direkt in der Java Skript Verwaltung eingebe?

Code:

<span style="color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">var bg= "Die Adresse des Hintergrundbildes mit der Höchsten Auflösung (größer als 1600 Pxiel)";</span><br style="margin: 0px; padding: 0px; color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);" /><br style="margin: 0px; padding: 0px; color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);" /><span style="color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">if(screen.width < 801) bg="Die Adresse des Hintergrundbildes mit der Auflösung 800x600";</span><br style="margin: 0px; padding: 0px; color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);" /><span style="color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">else if(screen.width < 1025) bg="Die Adresse des Hintergrundbildes mit der Auflösung 1024x768";</span><br style="margin: 0px; padding: 0px; color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);" /><span style="color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">else if(screen.width < 1281) bg="Die Adresse des Hintergrundbildes mit der Auflösung 1280x960";</span><br style="margin: 0px; padding: 0px; color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);" /><span style="color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">else if(screen.width < 1441) bg="Die Adresse des Hintergrundbildes mit der Auflösung 1440x1080";</span><br style="margin: 0px; padding: 0px; color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);" /><span style="color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">else if(screen.width < 1601) bg="Die Adresse des Hintergrundbildes mit der Auflösung 1600x12003";</span><br style="margin: 0px; padding: 0px; color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);" /><br style="margin: 0px; padding: 0px; color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);" /><span style="color: rgb(46, 139, 87); font-family: Verdana, Tahoma, Arial, Courier, CourierNew, sans-serif; font-size: 14px; background-color: rgb(255, 255, 255);">document.body.style.backgroundImage="url("+bg+")";</span>

So, nun habe ich mal mein Rechner noch mal angeschaltet und mir dein Forum noch mal angesehen.
Zu erst mal deinen HTML Seite mit dem Script.
Die sieht so aus:

Code:

var bg= "Die Adresse des Hintergrundbildes mit der Höchsten Auflösung (größer als 1600 Pxiel)";

if(screen.width < 801) bg="Die Adresse des Hintergrundbildes mit der Auflösung 800x600";
else if(screen.width < 1025) bg="Die Adresse des Hintergrundbildes mit der Auflösung 1024x768";
else if(screen.width < 1281) bg="Die Adresse des Hintergrundbildes mit der Auflösung 1280x960";
else if(screen.width < 1441) bg="Die Adresse des Hintergrundbildes mit der Auflösung 1440x1080";
else if(screen.width < 1601) bg="Die Adresse des Hintergrundbildes mit der Auflösung 1600x12003";

document.body.style.backgroundImage="url("+bg+")";

Ich denke das du nicht verstanden hast, was in dem Tuto geschrieben wurde.
Dort wo bei dir immer steht "Die Adresse des Hintergrundbildes mit der..." musst du natürlich die Adressen der Hintergrundbilder eintragen.
Dann hast du den Code auf deiner HTML Seite nicht im Codemodus oder besser im HTML MOdus eingesetzt.
Das hat zur folge, das es dort auch noch Textformatierungen gibt.
Rufe bitte deine HTML Seite noch mal zum Editieren auf und nutze bitte dieses Icon dazu:
Lösche den gesamten Inhalt.
Setze bitte noch mal den gesamten Code aus dem Tuto dort ein.
Bearbeite die Stellen mit dem Text "Die Adresse des Hintergrundbildes mit der..." so, das dort zwischen den Anführungszeichen auch immer eine gültige Bildadresse zu deinem verschiedenen Hintergrundbildern eingetragen ist.
Wenn du das erledigt hast, wird es auch Funktionieren.

Übrigens resultiert die Grüne Farbe daraus, weil du das als Hintergrundfarbe in deinem Forum eingesetzt hast.

AnK1904 schrieb:
Wie würde das denn funktionieren, wenn ich den Code direkt in der Java Skript Verwaltung eingebe?

Nein, so wie dein Code im Moment aussieht, würde der auch dort nicht funktionieren.
Mach es nochmal so, wie ich es dir oben beschrieben habe und ändere Die Einträge zu den Bildern entsprechend.
Wenn du dir nochmal in aller Ruhe das Tuto anschaust, wirst du auch erkennen, was du falsch gemacht hast.

Mittlerweile habe ich die Fehler beseitigt *wer lesen kann...* ist wohl schon zu spät heute Nacht.
Die Codes habe ich immer direkt über "Diesen Code markieren" übernommen.

Der Link des Bildes lautet https://2img.net/r/ihimg/a/img546/1536/mdu5.jpg

Der Code müsste dann doch folgendermaßen aussehen, oder?

Code:

var bg= "http://imageshack.com/a/img546/1536/mdu5/1600x12003.jpg";

if(screen.width < 801) bg="http://imageshack.com/a/img546/1536/mdu5/800x600.jpg";
else if(screen.width < 1025) bg="http://imageshack.com/a/img546/1536/mdu5/1024x768.jpg";
else if(screen.width < 1281) bg="http://imageshack.com/a/img546/1536/mdu5/1280X960.jpg";
else if(screen.width < 1441) bg="http://imageshack.com/a/img546/1536/mdu5/1440x1080.jpg";
else if(screen.width < 1601) bg=http://imageshack.com/a/img546/1536/mdu5/1600x12003.jpg";

document.body.style.backgroundImage="url("+bg+")";

Sobald ich den Code

Code:

body{
   background-position: top center;
   background-repeat: no-repeat;
   background-attachment: fixed;
}

im Stylesheet eingebe, verschwindet das Bild. Vorher wird es zwar dargestellt, aber weiterhin nicht gestreckt (s.u.).

Es soll eigentlich so aussehen, jedoch das Bild gestreckt:

Ja, wer lesen kann, ist klar im Vorteil.
Schau dir bitte an, was ich dazu im Tuto geschrieben habe:

Was wir nun brauchen ist ein Hintergrundbild, das in guter Auflösung so breit sein sollte, wie die höchste Auflösung, die wir abdecken wollen.
Hier also 1920 pixel - natürlich auch in der Höhe des Bildschirms.
Wenn wir so ein Bild haben, dann müssen wir das nun entsprechend auf die Größen der anderen Auflösungen verkleinern.
Also brauchen wir unser Hintergrundbild sechs mal in verschiedenen Größen.
Ich selber habe das mal vorbereitet, allerdings nur bis zu einer Größe von 1600 Pixel.
Hier mal meine Grafiken:
http://www.abload.de/image.php?img=800x600sz85.jpg
http://www.abload.de/image.php?img=1024x768jaiz.jpg
http://www.abload.de/image.php?img=1280x960el5g.jpg
http://www.abload.de/image.php?img=1440x1080tlif.jpg
http://www.abload.de/image.php?img=1600x12003z2s.jpg

Wenn du dir nun meine Beispielbilder anschaust, siehst du das es zwar immer das selbe Bild ist, aber das es verschieden groß abgespeichert ist.
Du hingegen hast dein Bild genommen, was ca. Halb so groß, 450 x 600 Px, ist und hast einfach einen Zusatz hinter den Namen des Bildes gesetzt.
So Funktioniert das nicht.
Hast du nun verstanden, was du machen mußt?

Schau mal, auf dieser Seite findest du Hintergrundbilder, auch in hoher Auflösung.
http://www.wallpapers-hintergrundbilder.de/desktop-wallpaper-landschaften.htm
Dieses speicherst du dir auf deinem Rechner ab, verkleinerst das mit einem Grafikprogramm und lädst die verschiedenen Bilder in den angepassten Größen hoch.
Die Links zu den entsprechenden Bildern setzt du dann in deinem Script ein.

Als ich im Bett kam, kam mir dann die Idee, direkt den Bild-Link online zu beziehen.
Ich habe nun alles komplett nochmal gelöscht, auch das Hintergrundbild und bin vorgegangen, wie es beschrieben wurde [ich habe auch die Hintergrundfarbe rausgenommen]. Anschließend habe ich das Bild wieder eingesetzt. Das Ergebnis: Das Bild wurde wieder nicht angezeigt, stattdessen war nun der gesamte Hintergrund weiß, nachdem ich denn Css-Stylesheet-Code eingegeben habe.

So sieht nun der HTML-Code aus:

Code:

var bg= "http://imagizer.imageshack.us/v2/1600x1200q90/546/mdu5.jpg";
 
if(screen.width < 801) bg="http://imagizer.imageshack.us/v2/800x600q90/546/mdu5.jpg";
else if(screen.width < 1025) bg="http://imagizer.imageshack.us/v2/1024x768q90/546/mdu5.jpg";
else if(screen.width < 1281) bg="http://imagizer.imageshack.us/v2/1280x1024q90/546/mdu5.jpg";
else if(screen.width < 1441) bg="http://imagizer.imageshack.us/v2/1440x1080q90/546/mdu5.jpg"
else if(screen.width < 1441) bg=http://imagizer.imageshack.us/v2/1600x1200q90/546/mdu5.jpg";
 
document.body.style.backgroundImage="url("+bg+")";


Ich glaube du verstehst mich nicht.
Hast du deine Bilderlinks mal aufgerufen?
Es ist jedes mal das selbe Bild in der selben Größe!
Klick mal das Bild hier an:
https://2img.net/r/ihimizer/v2/1600x1200q90/546/mdu5.jpg
Das ist dein Hintergrund, der eigentlich 1600x1200 Px groß sein soll.
Dein Bild ist aber nur 450x600Px groß.
Da das Hintergrundbild aber durch den CSS Code centriert wird liegt es nun hinter deinem Forum und ist deshalb nicht zu sehen.
Du verstehst einfach nicht, das du verschieden große Hintergrundbilder brauchst. Deine sind aber alle gleich groß. Es ändert sich aber auch nicht dadurch, das du die unter verschiedenen Namen abspeicherst.

Ich denke es wird das Beste sein, wenn du alles wieder zurück setzt, und dann mal diesen Weg gehst:
https://hilfe.forumieren.com/t38282-tutohintergrundbild-fur-verschiedene-auflosungen-uber-das-css-anpassen
aber ich Sage dir gleich, das dein Bild was du einsetzt dann qualitativ sehr schlecht angezeigt wird.

Danke. Die andere Anleitung hat mich zum Ziel gebracht. Das Foto war im übrigen nicht zu klein.
Ich schließe damit das Thema.