Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.
Seiten: 1
#1 10. Dezember 2012 12:01
- silent-pc
- hat von CMS/ms gehört
- Registriert: 05. Dezember 2012
- Beiträge: 3
Hintergrundbild nur bei hoher Displayauflösung...
Aktuell habe ich ein festes Hintergrundbild eingebunden.
Dieses kann man eigentlich nur erkennen wenn die Auflösung größer 1280 Pixel ist.
Um auf Netbooks, Tablets, Handys u.s.w... dieses Hintergundbild gar nicht erst zu laden (schnellerer Seitenaufbau) würde ich gern ein extra CSS verlinken welches das Bild nur läd wenn die Auflösung groß genug ist.
Ich weiß aber irgendwie nicht wie ich am besten vorgehen soll.
Eventuell würde auch eine Browserweiche nicht schlecht sein.
Denn auf Mobilen Geräten wie iPhone, Android sollte das Hintergrundbild nach Möglichkeit auch nicht geladen werden.
So das bei mobile Benutzern die Webseite schneller geladen wird.
Weiterhin wäre ein Wechsel des Hinterrundbildes zu verschiedenen Tageszeiten cool.
Dieses wäre aber eher nicht so wichtig.
Für die Einrichtung sollten nur "Standard"-Funktionen verwendet werden.
Also frei erhältliche Open Source Lösungen.
Kommerzielle Scripte kann ich leider nicht einbauen.
Alternativ wäre noch eine Lösung cool wenn das Bild nur geladen würde wenn der Client schnell via DSL, HSPDA o.ä. angebunden ist. Nur dies kann man sicher nicht so einfach ermitteln oder?
Beitrag geändert von silent-pc (10. Dezember 2012 12:02)
Offline
#2 10. Dezember 2012 12:39
- nockenfell
- Moderator
- Ort: Gontenschwil, Schweiz
- Registriert: 09. November 2010
- Beiträge: 2.934
- Webseite
Re: Hintergrundbild nur bei hoher Displayauflösung...
Die Geräteerkennung kannst du z.B. mit dem Modul ToolBox und der Smarty-Variablen $tbmobile machen. Das Hintergrundbild würde ich in diesem Fall direkt in den Quelltext schreiben (<body style="" /> oder <style>....</style>)
Wenn du des weiteren die Bildschirmaufllösung als wichtig erachtest (Netbooks), dann müsstest du zusätlich via Javascript eine Abfrage nach der Bildschirmauslösung machen und mit der Geräteabfrage kombinieren.
Für die Zeiten kannst du dir ein PHP Script (UDT - benutzerdefinierter Tag) bauen, welcher dir entsprechend den korrekten Bildpfad ausliefert.
Eine Detektion der Bandbreite ist leider nicht möglich
[dieser Beitrag wurde mit 100% recycled bits geschrieben]
Mein Blog / Diverse Links rund um CMS Made Simple
Module: btAdminer, ToolBox
Offline
#3 10. Dezember 2012 14:54
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.018
- Webseite
Re: Hintergrundbild nur bei hoher Displayauflösung...
Google mal nach CSS Media queries - damit solltest du dein Problem angehen können ... sieht dann praktisch in etwa so aus:
[== CSS ==]
@media screen and (max-width: 870px) {
body {background-image: url([[root_url]]/uploads/images/start870.jpg);}
}Musst diesen Code dann für jede Bildschirmgröße einfügen, die unterstützt werden soll.
Offline
#4 10. Dezember 2012 15:06
- otter24
- kennt CMS/ms
- Ort: Hamburg
- Registriert: 12. Januar 2011
- Beiträge: 339
Re: Hintergrundbild nur bei hoher Displayauflösung...
[== CSS ==] @media screen and (max-width: 870px) {
body { background-image: url([[root_url]]/uploads/images/start870.jpg); }
} <<<korrekterweise mit schließender Klammer, sonst kann es sein der der FF
alles vernünftig darstellt, aber die restlichen Browser nicht und dann geht das gesuche wieder los ;-) ab der auflösung ab der KEIN Hindergrundbild mehr angezeigt werden soll sähe das denn so aus
[== CSS ==]
@media screen and (max-width: 320px) {
body { background-image:none; }
}ansonsten lädt wird immer das Bild aus der in der letzten Delklaration geladen und man verbraucht
wieder ein paar Byte von seiner nicht vorhandenen Flatrate.
Gruß aus HH
Ich bin war kein Klugscheißer, ich weiß wusste es wirklich nicht besser.
Offline
#5 10. Dezember 2012 15:12
- Andynium
- Moderator
- Ort: Dohna / SN / Deutschland
- Registriert: 13. September 2010
- Beiträge: 7.018
- Webseite
Re: Hintergrundbild nur bei hoher Displayauflösung...
Habs korrigiert - danke für den Hinweis!
Offline
Seiten: 1