[phbb3] Hintergrundbild passt sich falsch an

[Syrania]

Guten Abend Supportforum,

Ich habe das Tutorial zum Anpassen des Hintergrundbildes an verschiedene Bildschirmauflösungen gefunden und Schritt für Schritt befolgt, jedoch wird mir der Hintergrund nun folgendermaßen angezeigt :


Zuerst waren dort schwarze Ränder, woraufhin ich die Farbe auf "#transp" geändert habe. Doch anstatt, dass sich das Bild nun wie gewünscht anpasst, sind diese unschönen weißen Ränder dort. Ich habe sogar schon in dem im Tutorial angegebenen Code meine eigene Bildschirmgröße genommen (1280x1024 statt 1280x960), doch die Ränder bleiben. Ich habe auch einige Leute mit anderer Auflösung gefragt, sie haben ebenfalls die weißen Ränder.
Habe ich vielleicht irgendetwas aus dem Tutorial falsch übernommen? Anscheinend funktioniert es bei den anderen Leuten, da sonst keiner dieses Problem hat. Selbst nach einiger Suche nach "Hintergrundbild" und anderen Dingen, habe ich kein Thema gefunden, das das selbe Problem beinhaltet..

[Günther]

Hallo,

das Hintergrundbild, das bei mir angezeigt wird, ist folgendes:
https://2img.net/h/i1213.photobucket.com/albums/cc464/SiverSoul/Dead%20End/2000x2000.png

Handelt es sich dabei um das Bild, das du eingesetzt hast?
Wenn ja, dann musst du mal logisch über die Größenverhältnisse nachdenken: Kann eine Grafik, deren Länge gleich lang ist wie deren Breite einen normalen Bildschirm ausfüllen, bei dem die Breite mehr beträgt als die Länge - wenn die Grafik ihre Proportionen behalten soll, also nicht verzerrt werden soll?
Erkennst du den Fehler?

Liebe Grüße
Günther

[Syrania]

Bitte entschuldige, aber ich verstehe leider nicht ganz, was du meinst. Ich habe zwar eben dieses Bild als "Hintergrund" eingefügt, jedoch in verschiedenen Größen, wie im Tutorial beschrieben.
Somit sieht der Code bei mir also wie folgt aus :

Code:

var bg= "http://i1213.photobucket.com/albums/cc464/SiverSoul/Dead%20End/2000x2000.png";

if(screen.width < 801) bg="http://i1213.photobucket.com/albums/cc464/SiverSoul/Dead%20End/800x600.png";
else if(screen.width < 1025) bg="http://i1213.photobucket.com/albums/cc464/SiverSoul/Dead%20End/1024x768.png";
else if(screen.width < 1281) bg="http://i1213.photobucket.com/albums/cc464/SiverSoul/Dead%20End/1280x1024.png";
else if(screen.width < 1441) bg="http://i1213.photobucket.com/albums/cc464/SiverSoul/Dead%20End/1440x1080.png";
else if(screen.width < 1601) bg="http://i1213.photobucket.com/albums/cc464/SiverSoul/Dead%20End/1600x1203.png";

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

Muss ich das bereits eingestellte 2000x2000 Pixel Hintergrundbild maskieren, damit diese Hintergrundbilder genutzt werden?

[Günther]

Damit meinte ich, dass die Größenverhältnisse, die du für deine Hintergrundbilder gewählt hast, der Auslöser dieses Problems sind.

Du hast beispielsweise diesen Code ins Script eingesetzt:

Code:

else if(screen.width < 1281) bg="http://i1213.photobucket.com/albums/cc464/SiverSoul/Dead%20End/1280x1024.png";

Dieser Code sagt aus: Wenn ein User mit der Bildschirmauflösung 1280 x 1024 px auf das Forum zugreift, erhält er als Hintergrundbild die von dir dort angegebene Grafik. Das Problem ist, dass diese eine Größe von 1.024 × 819 px aufweist.
Wie du siehst, ist die Auflösung also größer als die Grafik, und weil der CSS-Code diese oben zentriert platziert und keine Wiederholung zulässt, wird der überschüssige Platz eben frei gelassen und erscheint als weißer Rand.

Ich hoffe, du erkennst nun, dass zu jeder Auflösung, die du laut Tutorial im Script eingesetzt hast, auch eine exakt gleich große Grafik gehören muss. Wenn du einfach kleinere oder sogar quadratische Grafiken verwendest, dann ist ja klar, dass das Script seinen Zweck nicht erfüllt, oder?

Die Lösung lautet also: Sämtliche Grafiken müssen genau die Größe besitzen, wie sie im Tutorial vorgegeben werden.

[Syrania]

Merkwürdig, eigentlich hatte ich die richtigen Größen eingestellt.
Dann überarbeite ich das nochmal. ^^

Vielen Dank für die Hilfe, kann geschlossen werden.

[Günther]

Freut mich, dass ich dir helfen konnte. Gern geschehen.
-done-