Picture as background in theme

[gerard33]

Is it possible to use a picture as a background in a theme?

I have tried several things in the Themes.js such as
appBackground: 'url(domoticz.jpg)',
appBackground: 'url('images/domoticz.jpg')',
but no success (the jpg is in the /scr folder and in the /scr/images folder).

[t0mg]

In ReactJS, you'll need to import the image resources and inline them in your CSS.

Put your image in the src folder, for example under src/images/themes/ (it's OK to place in in the src folder, the React compiler will create a copy as /static/media/something.jpg when building). Then add this at the top of the Themes.js file:

import backgroundImage from '../src/images/theme/domoticz.jpg';

// Now you can use the new imported image in your template:
const Themes = {
  'Default' : {
    // [...]
    appBackground: `url(${backgroundImage})`, 
    /* note that these are backquotes because I used the ES6 template 
    notation but you could also write "url(" + backgroundImage + ")" */
  }
}

Don't forget to also add the other CSS background properties as necessary (eg position, repeat, etc).

[gerard33]

Thanks! Works like a charm :)

[t0mg]

Closing the ticket - also please see my comment in commit c3ac2b6 , you'll need to put the images (or a symlink) in src/ if they aren't in there yet (eg. if they are in /public instead).