Make background an image

Hi, Pretty new to Mendix and I’m trying to figure out how to make a container background be populated by an image? My image is uploaded to the desktop modeler in the images section of my module. I’ve tried using CSS in the styles box in my container with something along the lines of background-image: url(“image.jpg”) but can’t seem to get it working. The console on the desktop modeler keeps telling me it can’t be found. Any help would be appreciated!
2 answers

Hi Andrew,

You can use indeed CSS (in your SASS files) to set a background image. 

The images that you've uploaded to an Image collection in the desktop modeler, are deployed to a folder called "img”. 
The file name of the uploaded image in /img/ directory is:



For example, when you've uploaded your image.jpg to the Image Collection named “Background” in the Module named “Shared” the image filename will be Shared$Background$Image.jpg. 

So in the CSS you need to set the following for the above example:

.customBGContainer {
  background-image: url("/img/Shared$Background$Image.jpg");

Then apply the customBGContainer class to the container where you want the background image to be set.

Hope that helps.





I have the same question as Andrew but I’m not clear on Jeffrey’s answer. Can someone elaborate?