Das Forum der Foren
Würden Sie gerne auf diese Nachricht reagieren? Erstellen Sie einen Account in wenigen Klicks oder loggen Sie sich ein, um fortzufahren.

[Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen.

Nach unten

Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Empty [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen.

Beitrag von #Frank Do 24 Feb 2011 - 15:56

Wir empfehlen mittlerweile diese modernere Umsetzung:
[Tuto] Hintergrundbild für verschiedene Auflösungen über das CSS 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:
Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. A0153
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.


Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. 096151727061. Das Script erstellen.

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

Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. AboutfpmuAdminbereich Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 Module Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 HTML Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 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 :html: 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:
Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. A0218

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

Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. 096151727062. 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:

Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. AboutfpmuAdminbereich Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 Allgemeines Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 Forum Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 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:
Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. A0156
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:
Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. A0157
Das sendet ihr nun ab.

Weiter geht s mit dem dritten Teil dem:

Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. 096151727063. Das Hintergrundbild über das CSS platzieren

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

Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. AboutfpmuAdminbereich Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 Anzeige Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 Bilder & Farben Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 Farben Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Blue_a10 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.


Hintergrundbild - [Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen. Copyri11Hinweis:
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.
#Frank
#Frank
Administrator
Administrator

Männlich Anzahl der Beiträge : 33551
Hinweis : Never change a running system on Friday!

Browser : Firefox
Anmeldedatum : 13.08.08

Nach oben Nach unten

Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten