Background images

How do I set background images to Mendix apps? and is it possible to have different background images in different pages. Could you please give a detailed description of the css/sass files that I would have to change, if that’s case. I referred an already answered thread related to this. Perhaps it was an older modeler version. I couldn’t find the right files to change.  Thank you in advance!
6 answers

In the Mx directory of your project upload the background image to the theme > images folder.

In your sass file create a new custom class with something like this:

  background-image: url(/images/background.jpg)

Set the class within you layout(maybe top container of layout grid) to apply it to a specific set of lay outs. If you want a different background image for other pages, just repeat the process and set the class to a different lay out


I have my image under theme/Image

In custom.scss I have added the bg-image class

I tried calling this class in layout grid and container both 

Could you please advise what I am missing here?



Thank you for your advise.

Yeah the scss is getting compiled.

Also tried adding background-size:cover;  I was getting an error with theme/Image/Imagename.png, 

So I changed to the complete path. No errors since, but no background image either. Would appreciate any help on this topic. 




Thank you for the suggestion. Tried htmlsnippet as well : 

Called the file name in external file. This is placed in theme folder


What am I doing wrong here? I believe it should be relatively simple to set the background image. Is there any documentation available for exploring the various design capabilities in Mendix.


Thanks in advance


Just a short update on this : 

I tried other styling class such as having a skewed  container 

I did this by adding styling to the same custom.scss and it works. Now the question is why doesn’t the same work for background images? Maybe I am doing something wrong here. I read in an older article that the background image property must be called as ‘background’ and not ‘background-image’. I tried this as well but to no luck.


Thanks in advance.


If you just want to change the login page picture, this is how I did it:


You should be able to style that either in the modeler if you are using an anonymous users enabled app or by directly changing it in the login.html file in your theme folder if you’re not using anonymous users.

I’m assuming you’re using the latter, so this might be a case of finding which background image is used in your login.html and replacing it. 

You can click File →  Export Project Package in the Desktop modeler to find the install directory of your project, this is where login.html is stored. It should be the work-do-more.jpeg in the themes\resources\ folder.