Quick question: Image to background of app

0
Dear Mendix users How do I add an image to the background of my app? I believe Il need to access the pages CSS for this, but I am clueless on how to do so? Please help me out
asked
8 answers
1

Open your project directory.
Go to theme/styles/web/css/custom and create a file custom.css
If custom folder doesn’t exists, you can create one. It can work without this folder too.  Only your specified path in settings.json should be correct which you can see below. Separate folder is only for organizing things.

In settings.json file in theme/ , make sure to add the above created file in cssFiles declaration like this

"cssFiles": [
        "styles/web/css/main.css",
        "styles/web/css/custom/custom.css"
    ],

Now you can write CSS code that will work with your application. 

To add background image, please check the HTML element on which you want to add it. Or create a new container widget as parent of everything else and add image to it.
For CSS related tutorial, please see
https://www.w3schools.com/html/html_images_background.asp

answered
1

Go to File, select save as. and then you can select CSS. Or in the filename input box, just enter in double quotes as “custom.css”

answered
0

@Umar
Mine doesn’t have a folder with customer + should I download some text editting program to create a new css file?
Or how should i do this?​​​​​​​

answered
0

Ok so I have installed the program
As you can see this is currently the custom text file (I placed the image in the img folder)

I don’t know how to save the new file with .css extension though?

 




Further more: the other file currently shows this

answered
0






Not working yet

answered
0

Hi Boris, 
Please add , at the end of first line “/main.css”. Please check my original answer at top, it has a code snippet. I have also shared below. At the end of first line, there should be a ,

 

"cssFiles": [
        "styles/web/css/main.css",
        "styles/web/css/custom/custom.css"
    ],

 

answered
0






still no background sadly :( 
I want it to show instead of the black bbackground I have now
 

answered
0

Please go through some CSS tutorial as mentioned above also. I am again sharing a link for your help. 
You have added a CSS block without any selector (id or class) on it. This CSS won’t be applied to any element on your page. 

The HTML with black background needs a background. So give that div some id or a class. And write CSS for that id or class in custom.css file. Save it, stop mendix app, then run locally app again. Now it will work. You need to follow the complete process of adding CSS to HTML pages. 

Below are helpful links. Also at w3schools you can try CSS online
https://www.w3schools.com/css/

answered