A little bit embarrassing but: how can I set a responsive background image for the whole custom overview page? Appearance should be as on the homekit app from iOS. On phones just a portrait part and on bigger screens a landscape part of the image.
Is it by defining a background style property of the root component of the overview page? I tried it but the background keeps black.
Adding a background image to the overview page is done with just a small addition to the page code. At the top where there is the config section of the code you just add a style property with a background setting:
config:
label: Overview Page Label Is Here
style:
background: url('path to your image file')
Making that image fully responsive to the device screen is gong to be much higher level of difficulty. I’m not sure that the page properties are passed to the expression parser so building a dynamic expression based on the device object might not even be possible. At that point you are probably just left with figuring out the css settings that will automatically crop the image how you want as the page is displayed.
Great, thank you. Regarding the dynamic cropping: do I use the properties like xsmall, small and so on to define a size dependent cropping factor?
Hm, it is partially working. But I still need your help. When I am in the settings area and in the „run mode“ with CTRL + R I can see a background picture.
When I am on the standard overview page I only see a black background again. In the run mode the background-attachment: fixed property does also not work correctly. I would expect a background image being fixed while scrolling over the content. However, the image scrolls with the content and is being repeated until the end of the page.
The code:
config:
label: Overview
style:
background: url('http://192.168.188.4:8080/static/wozi.jpg')
background-attachment: fixed
The result (btw. I am currently just fooling around. This page is of course not my final one. Will it be ever finished? ^^)
The xsmall, small etc. properties will not impact the background. Those only, as far as I know, determine how the grid and rows/column items respond to page size. In order to modify the background based on the screen size you’ll have to work directly with the css properties that impact background filling and cropping.
My guess is that this has to do with the fact that you specified the whole address in your url:
This is going to cause some issues with access permissions depending on how you are viewing your page. You will get more consistent results by just using the relative path to your image:
background: url('/static/wozi.jpg')
Interesting. I would also expect that to work. Can you use the browser element inspector to see if the background-attachment property is being set correctly or if it is being over-ridden by something else?
So, I shortened the URL but I still have the same symptoms. Looking at the code it appears as if the background property is only used in the design area of openhab and on the real overview page it gets completely thrown away. But at least the background-attachment: fixed property is now working as expected when I can see the image in the design area. When I am scrolling the widgets move but the background stays fixed. Yeah. 
Regarding the dynamic widget size I found this topic on the forum: Device identification - #4 by absalom It looks like a JavaScript function is used in order to query the display width of the client. However, the example refers to HABPanel and I am not so sure whether this would also work in this context.
What do you think?
Fascinating…It hadn’t occurred to me that the tabbed page was interfering in that manner. Ok, lesson learned.
That changes things then. You could, I suppose, put in a feature request to have a background property added to the home tabbed page. Or you could try and simulate something using an image widget with absolute positioning (and possibly z-ordering, although just placing it on the page before all other widgets should be sufficient). I’ve not tried anything like this, so I don’t know how easy it will be, but the good news is that by using an image widget, you can use dynamic expressions again in the widget styles which may make it easier to make the image responsive as you intend.
The MainUI pages are not intended to have additional javascript added to them and the code pieces you see for HABPanel are not going to be easily incorporated.
OK, at least I now know that I am not doing something wrong.
Then thanks a lot for the feedback. I will at some point continue working on that and will give some feedback here.
