Hallo,
ich möchte gerne ein eigenes Hintergrundbild definieren. Mit dieser Anleitung bin ich jedoch zu dem gewünschten Ergebnis gekommen.
http://www.fhemwiki.de/wiki/FHEM_Tablet_UI/FAQ#Wie_kann_ich_ein_eigenes_Hintergrundbild_einbinden.2C_anstatt_des_einfachen_schwarz.3F
Es wird nur ein schwarzes Gridster angezeigt, jedoch kein Bild.
Ich habe ein neues css erstellt und dieses auch in die index.html eingefügt
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-pc.css" />
css:
body {
background:#000000 url(../images/IMG_2345.jpg) 0 0 no-repeat
}
.transparent {
background: rgba(0, 0, 0, 0) !important;
}
HTML:
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1" data-template="menu.html" class="transparent" ></li>
Fehlen evtl. Berechtigungen auf das Bild?
Freundliche Grüße
Tim Waida
Hallo Tim,
auf den ersten Blick sieht das so korrekt aus.
Dein Fhem benötigt natürlich Lese-Berechtigung auf die CSS-Datei und auf das Bild. (Analog den anderen Dateien).
Du kannst das aber ganz einfach testen, indem du das Bild per Browser direkt läds:
http://<Fhem-Server:Port>/fhem/tablet/images/IMG_2345.jpg
Ansonsten versuch auch mal folgendes:
1. Im CSS Body-Tag fehlt das Simikolon hinten. Kann sein, dass dein Browser das verlangt.
2. Alle Pfade kontrollieren. Insbesondere Groß- und Kleinschreibung.
3. ggf. mal nur das Bild (ohne zusätzliche Farbangabe usw) vorgeben.
4. Seite "untersuchen": Im Firefox gibt es unter Web-Entwicklung den "Inspektor". Das Tool zeigt dir die HTML-Seite mit den zugehörigen CSS-Angaben an. Ein sehr nützliches Tool. Kann gut sein, dass das andere Browser ebenfalls haben. Schau hier mal nach, ob das Bild erkannt wird und in der Vorschau (Mouse-Over) angezeigt wird.
Hallo phil82,
besten Dank. Gelegen hat es voraussichtlich an dem Semikolon.
Das Bild kann ich im Browser trotzdem nicht aufrufen. Es heißt immer:
Die Grafik "https://192.168.178.11:8083/fhem/tablet/images/IMG_2345.jpg" kann nicht angezeigt werden, weil sie Fehler enthält.
Naja, dann scheint das Bild (zusätzlich) "defekt" zu sein.
Wenn dein Browser das Bild nicht öffnen kann, dann kann es das i.d.R. auch nicht als Hintergrundbild anzeigen.
Mit Tablet UI hat es funktioniert.
Und auch jetzt mit dem JPG groß geschrieben wurde das Bild korrekt im Browser angezeigt.