Search code examples
google-app-maker

How to add a wallpaper/image in the background page in google appmaker?


I need to add a particular wallpaper in the background page of my app to make the app look more colorful and beautiful. Is there any way?

The problem is that once you add an image to a page then it does not allow you to place another widget over it or cover it. It always aligns it horizontally or vertically.


Solution

  • This is pretty much basic css. I'd recommend you to look over this to learn more. So, in appmaker, if you want to apply the background image to a page do this:

    The CSS

    1.) First, select the root widget of the page you are interested. enter image description here

    2.) Now, that you have the page selected, let's move to the style editor. Once there, on the Page Style section just type a "."(period, dot) and wait for the suggestions to appear. The first suggestion is what you need, so just press enter or select it with your cursor.

    enter image description here

    3.) Now that you have selected the element with a css selector, you can apply styling. For the background, you need to do this:

    .app-myTestingPage-myPage {
      background: url("url-to-picture");
    }
    

    enter image description here

    In the above example, url-to-picture represents that, a url to a an image, preferably if it is served over https.


    The URL

    I know two ways in which you can get the background image url. The first one is to use any image url you find on the internet or a url hosted in your own server or cdn. The second way is to upload the image to appmaker resources and use that url. If you choose the latter, then do the following:

    1.) Go to the app settings.

    2.) Click on Resources

    3.) Drop your image file in the respected area or click the button to browse

    enter image description here

    Once the resource finishes uploading, you can click the copy icon to copy the url to the resource and you can use that in your page css as the background url.

    enter image description here