[Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen.

Immer wieder kommt die Frage auf, wie man es anstellen kann, dass das Hintergrundbild bei allen gleich groß angezeigt werden kann.
Dazu muss immer wieder gesagt werden, dass das bis heute noch nicht möglich ist, da diese Funktion erst bei CSS3 eingeführt werden soll, was aber bis heute noch nicht der Fall ist.

Wir haben nun aber eine andere Lösung gefunden, dass man hier das Hintergrundbild nun doch wenigstens annähernd an die Bildschirmauflösungen der verschiedenen User anpassen kann.

Mal was grundsätzliches zu Bildschirmauflösungen:
Früher war es einfach, weil es noch nicht so viele verschiedene Auflösungen gab.
Es waren bis vor ein paar Jahren Auflösungen von 800 x 600 Pixeln oder 1024 x 768 Pixeln die am meisten verbreiteten.
Das hat sich aufgrund der technischen Fortschritte inzwischen grundlegend geändert.
Es gibt heute, auch wegen der Widescreens, eine Vielzahl von Bildschirmauflösungen, mit denen ein User heute deine Seite betrachtet.
Wer Google Analytic auf seinem Forum installiert hat, kann sich das ja mal anschauen.
Hier mal ein Beispiel:

Auf dieser Übersicht sehen wir die 10 häufigst benutzten Auflösungen, die auf meinem Forum benutzt werden.
Hier fällt schon auf, dass es sich um 10 der häufigsten Auflösungen handelt.
Insgesamt sind aber 121 verschiedene Auflösungen registriert.
Nun können wir nicht alle Auflösungen gesondert berücksichtigen, sondern müssen auch hier Kompromisse eingehen.
Schauen wir auf die Grafik, dann sehen wir, dass die breiteste Auflösung mit 1920 Pixel die breiteste ist, die benutzt wird.
Der Wert liegt bei ca 8,5 Prozent der Nutzer.
Wir nehmen nun die Breite der Einstellungen die nach dieser Rangliste die 6 häufigsten Auflösungen sind:
1920, 1600, 1440, 1280, 1024 und dann noch 800 für die Smartphones und andere Geräte.

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

---

Kommen wir nun zur Funktion.
Wir benötigen ein Script dazu, das die Bildschirmauflösung des Users abfragt und dann das entsprechende Bild als Hintergrund einsetzt.
Das hier besteht nun aus drei Schritten.
1. Das Script erstellen und speichern
2. Das Script einsetzen
3. Das Hintergrundbild über das CSS platzieren.

1. Das Script erstellen.

Um das benötigte Script zu erstellen, legen wir eine neue HTML Seite an.

Adminbereich Module HTML HTML-Seiten-Verwaltung

Ich nenne diese hier nun "background".
Folgende Einstellungen:
Möchten Sie Kopf- und Fußteil Ihres Forum nutzen? auf Nein stellen
Diese Seite als Startseite einsetzen? auch auf Nein stellen.
Dieses Script setzen wir nun auf der HTML Seite in das große Fenster ein.
Bitte darauf achten, das der HTML Editor im einfachen Modus steht.
Das muss dabei grün sein.
Dieses Script wird nun in das große Fenster eingesetzt:

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+")";

Am Ende soll die Seite so aussehen:


Das ist nun der erste Schritt gewesen. Kommen wir nun zu Schritt:

2. Das Script einsetzen

Um das Script nun im Forum einzusetzen wählen wir nun einen Weg, der für alle Foren Version Funktioniert.
Versierte Nutzer können das Script auch anders einsetzen.
Den Aufruf setzen wir in der "Beschreibung der Webseite" ein:

Adminbereich Allgemeines Forum Einstellungen

Wir brauchen dazu allerdings erst noch die Adresse der HTML Seite die wir in Schritt 1 erstellt haben. Diese finden wir in der Übersicht der HTML Seiten:

In das Feld unter "Beschreibung der Webseite" setzen wir nun den Aufruf des Script ein:

Code:

<script type="text/javascript" src="/h14-background"></script>

Dort, wo hier nun:
src="/h14-background"
steht, setzt ihr den Teil des Links ein, wie er bei euch im Forum heißt.
Es sollte dann so aussehen:

Das sendet ihr nun ab.

Weiter geht s mit dem dritten Teil dem:

3. Das Hintergrundbild über das CSS platzieren

Dazu müssen wir folgendes in das persönliche CSS einsetzen:

Adminbereich Anzeige Bilder & Farben Farben Reiter: CSS Stylesheet

Hier setzen wir diesen Code ans Ende in das große Eingabefenster ein:

Code:

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

Diesen Eintrag dann noch absenden.
Dieser Eintrag sorgt nun dafür, das unser Hintergrundbild oben zentriert wird und nicht nach unten hin wiederholt wird. Das Bild ist fest auf der Seite platziert.

Damit hätten wir alles gemacht und es sollte nun funktionieren.
Euer Hintergrundbild sollte nun je nach Bildschirmauflösung eurer User entsprechend eingesetzt werden.
Leider kann man das sehr schlecht überprüfen, wenn man nicht über mehrere Rechner mit verschiedenen Auflösungen verfügt.
Viel Spaß mit eurem angepassten Hintergrund

---

Dieses Tutorial wurde im Original von Quierra aus dem Französischen Support Forum erstellt und dann vom Französischen Staff Team überarbeitet. Das Original des Französischen Teams ist hier zu finden.
Die deutsche Übersetzung wurde von #Frank im Februar 2011 erstellt.

---

Hinweis:
Dieses Tutorial steht unter dem Copyright von http://hilfe.forumieren.com und darf ohne vorherige Genehmigung durch das Team nicht, auch nicht in Auszügen, auf anderen Seiten verwendet werden.