How to set image background in Mobile Application?

Hi,I try to set image to all view by add image to file's manager in app menu

and set in app style => background like this

and test in browser and debug.it work.
But after I compile with cordova to .apk and test in android,background image was not show.
Do I missing something?

Hello tin,

Certainly you have reason: an image path like "/app/images/background.png" can work in the debugger. However, the path we must use in this case is "../images/background.png". In fact the CSS files are under the "app/styles" directory, but the images are placed in "app/images". What we must do is to "up to the parent directory", and then enter in the "images" directory to finally specify the "background.png" image we want to use.

thanks,very quick support. It work now

but the next problem was coming.I try to stretch background-image to fit views.
but didn't find a properties like

background-size: cover

from this sample
http://www.w3schools.com/cssref/css3_pr_background-size.asp

Hello,

Certainly "background-size" is not supported right now from the object inspector. Will be supported in the next AB release. In the meanwhile, you can use the app Inline CSS option or a CSS file in order to prepare a code like this:

As you can see, you can also set the image in that CSS code.

On the other hand, if you wanted the same background for all views, maybe you can use the object inspector (once select the application, that is, clicking outside the app's view in the designer) or use a CSS code like the above one but applied to the body tag, for example:

P.S. Ok. Probably this last one have not too much sense if we use ".appView", another way to set the background or apply CSS code to all the app's views.

Hi David,I use this code in Inline CSS.It work now(for the other I set it via app builder properties)

Hello,

Yes; the above can work. Anyway I update App Builder and now we can use "App Builder properties" to set the "background-size". You can use wathever you wanted now tin.

Thanks.great update.David

You're welcome! :)

I try to fix it after set background-size: cover;
still not cover full views(some space at bottom).How to solve it?
(in image I use repeat-Y too.)

Hello,

Honestly yesterday it's the first time I view the "background-cover" rule. In my own projects I never need it before. I use the "repeat", the "position", and some other background related rules, but never the "cover", so I am not sure if can help too much here tin.

What if you use something like this?

Hello,

Honestly yesterday it's the first time I view the "background-cover" rule. In my own projects I never need it before. I use the "repeat", the "position", and some other background related rules, but never the "cover", so I am not sure if can help too much here tin.

What if you use something like this?

background-cover: 100% 100%;<br>

I try it,David.With that code Background-image will not show in mobile App.
So,I giveup for it now.I use background-color to solve it.
I don't know why it happen like that.

Hello,

Trying in app's views I think the "background-size" is working properly here in my browsers and my mobile device. Trying to put it to be used in the "body", that is, applied to the entire application, for some reason the "100% 100%" is not working, probably due to the app's views CSS rules (width and height).

Try with this instead, that works for me:

* vw mean "viewport width" and vh mean "viewport height".

I try it.It work for me too!!.Thanks David.

Hello,

I try it.It work for me too!!.Thanks David.

You're welcome!