Cant load local image as background, please help

Add-ons UIs
1

Hello, everyone,
I’m trying to create a local image as a background for a widget.
According to the description, forums, etc., it should be in “/static/Bild.png”. The path is in /etc/openhab/html/.
In the browser I can see the image by entering “IP address/static/image.png”.
However, when I type that in the YAML, the image doesn’t load:
f7 block:
…
styles:
background: url(/static/image.png)
or
background-image: url(/static/image.png)

What could be the reason? I hope you can help me.

Many thanks & best regards
Volker

2

The style properties have to follow css syntax, so in this case, url takes a string which just means you have to put your location in quotes:

background: url("/static/image.png")
3

Unfortunately not.
I tried “” and ‘’ both are not working.
If I put a www url into the brackets, it works without Quotes:
background: url( https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/9/3/93ffeba564f6db775763d2bd95223a48d89c7816.png )

I saved the Image to /etc/openhab/html/Image.png and also in …/html/static. My Openhab is reachable on Port 8080.

4

I’m not sure which openHab installation method you’ve used, but you’re probably not using the correct folder to store the image. If you tried to create the html folder then that is not the correct location, the folder already exists when OH is installed. The html folder you are looking for is inside the conf folder where you find all the other folders related to adding text files (e.g., the items folder or the persistence folder, etc.). I doubt that is just /etc/openhab.

5

Hi, all my conf files are located in /etc/openhab. There are all Text configs. The html Folder was already created through openhab installation process.
I installed manually since Openhab 1.x
The Folder html and all containing files have the 777 permission and are owned by openhab user.

6

Yep, I see that now. Sorry, that should have been clear to me because you said:

But looking back at your first post, I think I see the problem now:

To add css stylings to the widget components it’s under the style property not styles

7

Ah sorry, that “styles” from the first Post was a typo.

I try to integragte the “boiler-small” widget. The YAML Code the Editor is:


...
    - component: f7-block
      config:
        style:
          min-height: 180px
          max-height: 180px
          max-width: 120px
          min-width: 120px
         # background: url("static/boiler.png")
         # background-image: url( https://community-openhab-org.s3.dualstack.eu-central-1.amazonaws.com/original/3X/9/3/93ffeba564f6db775763d2bd95223a48d89c7816.png )
          background-size: contain
          background-position: right bottom
          display: flex
          flex-direction: column
          align-items: start
...

I tried a little bit with “background” or “background-image”

8

It’ll be much, much easier for users on this forum to help you debug your code if you put the code in “code fences”. Either push the image button in the editor or just put three backticks before and after your code:

```
Your code goes here
```

One of the most important things with code fences is it will preserve the indentation of text and in yaml code the indentation is critical. If I assume the correct indentation, the code you’ve posted works for me with one small change (your relative path to the image has to start with a slash):

- component: f7-block
  config:
    style:
      min-height: 180px
      max-height: 180px
      max-width: 120px
      min-width: 120px
      background: url('/static/boiler.png')
      background-size: contain
      background-position: right bottom
      display: flex
      flex-direction: column
      align-items: start

If that doesn’t work for you then double check the indentations to make sure they are correct and double check your quotes to make sure that you’re not getting “smart” quote-marks.