Using image as background in mendix

Good afternoon, Should be easy, I'm trying to use a background image on a table in Mendix using the following style property, the image I'm using is contained in the Layouts.image section in Mendix: background-image: url(layouts/image/background.jpg); Is that the correct path to the image? Regards, Matt Smith
4 answers

In my CSS file I use

    background: url(images/layout/mainBox-ess.png) no-repeat;
    background-size: cover;

Note that it is background eather than background-image. The path is a relative path from the css file location to the image location.

Hope this helps


Hi Matt,

You can link to an image anywhere but the easiest way is to place the image in the Theme folder yourself, then it will be 'uploaded' in every deploy. You don't have to add it in Mendix the way you would with other images. You can though, except the path to your image would change to something like <root>/web/img/Layouts$[imagename]

If you navigate to deployment/web/img you can see this is where Mendix stores the images you add in the modeler. You'll probably prefer to put it in the Image folder of your theme though, it makes it easier to link to and less likely to break when the image is changed in the modeler.




.region-content {
	padding: 0; // for if region-content is on a col so you dont get scollbar
    background: url(../images/{YourImage}.png) no-repeat;



Hi all,

My root folder apears to be 'web' then added 'images' folder and placed my image in the newly created images folder. Note that I have used that for adding image as a background image to the app done throught the container of the page >properties>styling adding following: 

background: url(../images/'imageName'.jpg) no-repeat;
background-size: cover;