Lexi Help
Die neuesten Themen
» Mobile Ansicht leider Fehlerhaft
von Br0adsw0rd Heute um 19:31

» [phpBB2] Hintergrund festpinnen
von Fayé Heute um 16:56

» Mein altes Forum zurückbekommen
von Bigtuber Gestern um 22:59

» Impressum
von #Frank Mi 28 Sep 2016 - 23:45

» [phpBB2] Im Beitrag Bild und Text nebeneinander anzeigen
von #Frank Mi 28 Sep 2016 - 23:43

» [phpBB2] Unicode Emojis im Forum
von Mariacher J.E. Mi 28 Sep 2016 - 22:07

» Themen-Icons
von Bigtuber Mi 28 Sep 2016 - 20:46

» [phpBB2] Schriftfarbe in der Expressantwort
von Bigtuber Mi 28 Sep 2016 - 20:09

» Themen fixieren
von inde Mi 28 Sep 2016 - 20:05

» [Update] Neues Theme der mobilen Version V2
von inde Mi 28 Sep 2016 - 13:34

» Begriff : "merken"
von Ray Di 27 Sep 2016 - 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Di 27 Sep 2016 - 11:07

» Servamp Forum
von Raine Kamiya Mo 26 Sep 2016 - 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Mo 26 Sep 2016 - 20:56

» Private Nachrichten
von inde Mo 26 Sep 2016 - 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

Partner
free forum

[Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen.

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

[Tutorial] Hintergrundbild an verschiedene Bildschirmauflösungen anpassen.

Beitrag von #Frank am 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:

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


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.



Keine Unaufgeforderten PN senden! Unsere Regeln Passwort vergessen ? Info's zu den Gründerdaten
Mein IPad schreibt die tollsten Wörter... Nicht wundern... Einfach geniessen...!

Meine Geduld wird geladen:

Fortschritt: 67%
Never change a running system on Friday!

#Frank
Administrator
Administrator

Männlich Beiträge : 34503
Hinweis : Never change a running system on Friday!
Anmeldedatum : 13.08.08
Firefox

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten