Tablet UI Hintergrundbild

[TWART016]

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

Code Auswählen Erweitern

<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-pc.css" />

css:

Code Auswählen Erweitern

body {
background:#000000 url(../images/IMG_2345.jpg) 0 0 no-repeat
}

.transparent {
    background: rgba(0, 0, 0, 0) !important;
}


HTML:

Code Auswählen Erweitern

<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

[phil82]

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.

[TWART016]

Hallo phil82,

besten Dank. Gelegen hat es voraussichtlich an dem Semikolon.

Das Bild kann ich im Browser trotzdem nicht aufrufen. Es heißt immer:

Code Auswählen Erweitern

Die Grafik "https://192.168.178.11:8083/fhem/tablet/images/IMG_2345.jpg" kann nicht angezeigt werden, weil sie Fehler enthält.

[phil82]

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.

[TWART016]

Mit Tablet UI hat es funktioniert.

Und auch jetzt mit dem JPG groß geschrieben wurde das Bild korrekt im Browser angezeigt.