Custom login background picture in Mendix 8

How to implement an image for the background of a Mendix 8 custom login page? In the Responsive profile (not the native mobile profile) In a way that the image doesn’t show on other pages In which project directory folder must the image be placed in order for it to be picked up?  
2 answers

Frederic – if you’re working with the standard login page (login.html) you can find the file in the /theme folder and update the HTML and CSS as much as you want. It’s easiest to put the images in /theme/img and reference that.

If you’re using a custom login page/widget, then you can create a new page layout and apply that to only the login page (so the other pages keep using default ones)


Thanks, Marshall. My question was part of a larger effort to copy the styling of an earlier Mx7 app into a new Mx8 app. Turns out, what I had to do was this:


  1. In the Modeler, in the old Mx7 app, find the names of the classes that are assigned to the elements
  2. Assing these same classes to applicable elements in the Mx8 app (because the web part of Mx8 is still CSS based)
  3. In Visual Studio Code, in the directory structure of the old Mx7 app, find the file with these classes and copy them
  4. In Visual Studio Code. in the UI resources, layouts directory of the new Mx8 app, create a new file _loginpage.scss 
  5. Copy the classes into this new file
  6. One of the classes includes a link to the background picture, adjust the path to the file (which is from main.css)
  7. Save the file and with Koala, compile everything
  8. Running the Mendix project now includes the new classes and picture