#1 2016-03-30 19:31:30

tin
Member
Registered: 2016-03-20
Posts: 173

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

2ni1fyh.jpg

and set in app style => background like this

t06s90.jpg

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?

Offline

#2 2016-03-30 19:37:40

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,706
Website

Re: How to set image background in Mobile Application?

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.

Offline

#3 2016-03-30 20:10:51

tin
Member
Registered: 2016-03-20
Posts: 173

Re: How to set image background in Mobile Application?

thanks,very quick support. It work now

"../images/background.png"

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 … d-size.asp

Offline

#4 2016-03-30 20:17:55

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,706
Website

Re: How to set image background in Mobile Application?

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:

.appView
{
  background-image: url('../images/background.png');
  background-repeat: no-repeat;
  background-size: cover;
}

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:

body
{
  background-image: url('../images/background.png');
  background-repeat: no-repeat;
  background-size: cover;
}

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.

Offline

#5 2016-03-30 20:27:10

tin
Member
Registered: 2016-03-20
Posts: 173

Re: How to set image background in Mobile Application?

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

body {
  background-size: cover;
}

thanks.

Offline

#6 2016-03-30 20:34:12

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,706
Website

Re: How to set image background in Mobile Application?

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.

Offline

#7 2016-03-30 21:11:11

tin
Member
Registered: 2016-03-20
Posts: 173

Re: How to set image background in Mobile Application?

Thanks.great update.David

Offline

#8 2016-03-30 21:23:37

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,706
Website

Re: How to set image background in Mobile Application?

You're welcome! smile

Offline

#9 2016-03-31 08:31:43

tin
Member
Registered: 2016-03-20
Posts: 173

Re: How to set image background in Mobile Application?

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.)

30a8780.jpg

Offline

#10 2016-03-31 10:58:34

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,706
Website

Re: How to set image background in Mobile Application?

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%;

Offline

#11 2016-03-31 19:02:58

tin
Member
Registered: 2016-03-20
Posts: 173

Re: How to set image background in Mobile Application?

David wrote:

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%;

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.

Offline

#12 2016-03-31 19:49:38

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,706
Website

Re: How to set image background in Mobile Application?

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:

background-size: 100vw 100vh;

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

Offline

#13 2016-04-01 07:38:56

tin
Member
Registered: 2016-03-20
Posts: 173

Re: How to set image background in Mobile Application?

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

Offline

#14 2016-04-01 08:29:22

David
Admin
From: Alcobendas, Madrid, Spain
Registered: 2015-04-21
Posts: 1,706
Website

Re: How to set image background in Mobile Application?

Hello,

tin wrote:

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

You're welcome!

Offline

Board footer

Powered by FluxBB


Copyright ©2018 DecSoft. All rights reserved.