Hintergrundbild im Gridster Layout

robo · 27 September 2017, 22:05:35

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>

Standarduser · 28 September 2017, 19:59:15

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:

Code Auswählen

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

Code Auswählen


<html>
<head>
</head>
<body id="WZ_uebersicht">
...
</body>
</html>

Vaddi · 30 September 2017, 01:43:39

Deine URL scheint mir Fehlerhaft zu sein.

Code Auswählen

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.

Code Auswählen

url("images/schlafzimmer.jpg");

Ich habe in meinen Einkaufslisten ein Hintergrundbild von dem jeweiligen Markt.

Code Auswählen

style="background-image:url(img/BILD.png); 	background-blend-mode: overlay;	background-size: 50%;	background-position: 50% 45%;	background-repeat: no-repeat;"

robo · 03 Oktober 2017, 17:20:57

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;
}

Vaddi · 03 Oktober 2017, 18:05:36

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.

robo · 04 Oktober 2017, 22:50:03

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>

moonsorrox · 05 Oktober 2017, 12:17:57

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

Vaddi · 05 Oktober 2017, 17:14:05

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?

robo · 05 Oktober 2017, 22:02:06

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:

Code Auswählen


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

Code Auswählen


.row-height-800 {
  height: 800px;
}

Danke Euch noch mal für die Unterstützung!

ToM_ToM · 08 Juni 2018, 23:06:53

Kann man eig. auch irgendwie den Standard Gridster Hintergrund abschalten?

EDIT

Ah.. habe es rausgefunden. User-CSS editiieren.

Code Auswählen


.gridster > ul > li,
.card {
    /* background-color: #FFFFFF; */
	background-color: rgba(42, 42, 42, 0.4)
}

VG, Thomas