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:
.bg-image{
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?
Hello,
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.
Best,
Agnues
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.