Ein Hallo an die Tablet UI Experten,
seid einiger Zeit baue ich nun an einer Tablet UI Oberfläche, komme aber an einer Stelle nicht weiter. Ich verwende das Gridster Layout und würde gerne abhängig von dem jeweiligen Raum ein entsprechenden Hintergrundbild setzen. Wie ein Hintergrundbild im Gridster LI Tag gesetzt wird habe ich im Forum gefunden, was auch gut funktioniert. Gerne würde ich es jedoch hinter der gesamten Gridster Fläche platzieren. Nachfolgend ein paar Code Schnipsel. Habe auch schon mit einem DIV Tag vor dem Gridster probiert, funktioniert jedoch auch nicht. In dem Gridster Tag wird die Formatierung verschoben. Würde mich sehr freuen, wenn jemand eine Idee hat.
CSS Style:
.own-bg-sz {
background-image: url("/fhem/tablet/images/schlafzimmer.jpg");
background-color: #223142;
background-size: cover;
}
.semitransparent {
background: rgba(34, 49, 66, 0.8 )
!important;
}
SubPage:
<div class="gridster own-bg-sz">
<ul>
<li data-row="1" data-col="1" data-sizex="4" data-sizey="1" class="semitransparent">
<div class="vbox">
<div class="big bold center-align">Schlafzimmer</div>
</div>
</li>
</ul>
</div>
Ich hab leider gerade keine Gridster-Seite, bei der ich das probieren könnte, aber Du kannst den Hintergrund ja auch an den Body-Tag hängen. So hab ich das auf einer Unterseite gemacht und das funktioniert zuverlässig.
CSS:
#room-wz {
background-size: 800px;
background-image: url("bg-image_Wohnzimmer2.png");
background-repeat: no-repeat;
background-position-x: 80px;
background-position-y: 80px;
}
Aufruf:
<html>
<head>
</head>
<body id="WZ_uebersicht">
...
</body>
</html>
Deine URL scheint mir Fehlerhaft zu sein.
url("/fhem/tablet/images/schlafzimmer.jpg");
Deine index.html befindet sich ja bereits im Ordner
/fhem/www/tablet/index.html
Von dort aus musst du auch für dein image ausgehen.
url("images/schlafzimmer.jpg");
Ich habe in meinen Einkaufslisten ein Hintergrundbild von dem jeweiligen Markt.
style="background-image:url(img/BILD.png); background-blend-mode: overlay; background-size: 50%; background-position: 50% 45%; background-repeat: no-repeat;"
Ich danke Euch für die Idee. Darüber ist es mir gelungen das Hintergrundbild im Body Tag einmal zu setzen. Anscheinend kann es allerdings nur ein Body Tag auf einer Seite geben oder? Dadurch das alle Seiten in die Index Startseite eingebettet werden, kann das Hintergrundbild anscheinend nur einmal gesetzt werden. Die URL sieht bei mir wie folgt aus. Habt Ihr noch eine Idee, wie das Hintergrundbild dynamisch pro Seite im Body Tag konfiguriert werden kann?
http://x.y.z.v:8083/fhem/ftui/index-mobile.html#menu-eg.html
Code der Index Seite:
...
<div data-type="link"
data-url="#menu-eg.html"
data-load="#main-eg-rooms">
EG
</div>
<div class="page" id="main-eg-rooms"></div>
Code Subpage:
<html>
<title>Erdgeschoss</title>
<head></head>
<body id="bg-sz">
....
</html>
Code CSS Style Datei:
#bg-sz {
background-image: url("../images/schlafzimmer2.jpg");
background-repeat: no-repeat;
}
Hey, schön dass das geklappt hat.
Um auf jeder Unterseite ein eigenes Hintergrundbild zu haben, musst du deine index.html
folgende Zeile bearbeiten.
<div class="page" id="main-eg-rooms"></div>
Entweder erstellst du für jede seite eine Klasse in der CSS und änderst die Zeile so
<div class="page bg-sz" id="main-eg-rooms"></div>
oder inline sieht dann so aus
<div class="page" id="main-eg-rooms" style="background-image: url(../images/schlafzimmer2.jpg); background-repeat: no-repeat;"></div>
So kannst du dann für jede unterseite, ein eigenes Hintergrundbild definieren.
Guten Tag,
die Antwort kam ja mal richtig schnell. Hammer! Habe ich nicht mit gerechnet. Danke!
Beide Varianten habe ich probiert, jedoch ohne Erfolg. ;(
Kann mir nicht Zusammenreimen woran es liegen soll. Inline wie folgt.
Hier noch mal ein paar Details.
Index Seite:
<div class="page" id="main-eg-rooms" style="background-image: url(../images/schlafzimmer2.jpg); background-repeat: no-repeat;"></div>
Subpage:
<html>
<title>Erdgeschoss</title>
<head></head>
<body>
<div class="page" id="main-eg-rooms">
<div class="gridster">
<ul>
...
</html>
macht das mal beide bitte mit Codetags das ist besser lesbar... Mit dem dicken Font geht das auch, aber eben besser ist Codetags, dass ist die Raute# über den Smilys ;)
Wird gemacht, allerdings geht Fett schreiben im Codetag nicht. Ist aber nicht schlimm, dann
nehme ich in Zukunft für solche Sachen auch einfach Codetag anstatt Bold
Hey, du musst immer deine Pfade anpassen/berücksichtigen.
Schreib hier doch bitte mal deine Ordnerstruktur auf.
In welchem Ordner befindet sich die index.html und wo ist das
Bild?
So jetzt hab ich es hinbekommen. Ein Thema war in der Tat der Pfad zum Bild, der Klassiker. ;) In der Subpage musste ich das Gridster Layout in ein "Sheet/Row/Cell" Layout einbetten und dem Row Div Tag eine Höhe mitgeben.
Code Subpage:
<html>
<title>Schlafzimmer</title>
<head></head>
<body>
<div class="page" id="main-og-sz">
<div class="sheet">
<div class="row row-height-800">
<div class="cell-25 left-space top-align">
<div class="gridster">
....
</html>
CSS Datei:
.row-height-800 {
height: 800px;
}
Danke Euch noch mal für die Unterstützung!
Kann man eig. auch irgendwie den Standard Gridster Hintergrund abschalten?
EDIT
Ah.. habe es rausgefunden. User-CSS editiieren. :)
.gridster > ul > li,
.card {
/* background-color: #FFFFFF; */
background-color: rgba(42, 42, 42, 0.4)
}
VG, Thomas