Forum | Appery.io

Hello,
I have a picture as the background of the screen.But on different cell phone it displays different. Resolution on small phone can display the full picture however is not complete in the resolution of a large mobile phone picture shows. How to solve this problem?

Hello Crystal!

This should help https://getsatisfaction.com/apperyio/...

Hello,
I have looked the link and tried the methods,but it seems does't work.
Appery("bgImage").css('background-image','url("https://dl.dropboxusercontent.com/u/1...")');
Appery("bgImage").css('background-size','cover');
Appery("bgImage").css('background-position','center');
Appery("bgImage").css('position', 'absolute');
Appery("bgImage").css('width', '100%')
(bgImage: the name of grid)

The following picture is the complete picture.

Crystal,

Add custom CSS: pre[name=mobileimage]{
position:absolute;
top:0;
left:0;
}/preOn page show event run this JS:preAppery("mobileimage").width($("html").width());
Appery("mobileimage").height($("html").height());/preWhere 'mobileimage' is an image component name.

Hello,
Do you mean that on the basis of the original.
(
Appery("bgImage").css('background-image','url ("https://dl.dropboxusercontent.com/u/1...")');
Appery("bgImage").css('background-size','cover');
Appery("bgImage").css('background-position','center');
Appery("bgImage").css('position', 'absolute');
Appery("bgImage").css('width', '100%') ; (bgImage is the grid component)
)
I would like to add an image control, and then added to the CSS and JS code above that you said? But it has no effect.

Hello! Sorry, not sure I understand. Could you post screenshot of what did you add and where?

The code is :

Hello!
1) For mobilecontainer set all paddings to 0
2) Instead Grid use html component (delete Grid and give html component the same name bgImage)
3) For html component set all margins to 0
4) On page Load add the following code instead the one you have now
preAppery("bgImage").css('width', '100%') ;
Appery("bgImage").css('height', '100vh') ;
Appery("bgImage").css('background-image','url("https://dl.dropboxusercontent.com/u/134459352/fondoportadatam.jpg")');
Appery("bgImage").css('background-size','100% 100%');/pre

Hello,
Thanks! That works fine!
But I have another question.I don't want the whole screen has the background. I just like the part of the screen has the background . For instance I want set background of the top on the screen .

bgImage : name of the grid component.
html_11 : name of the html

How to set the background image of the grid?

Hello! You need to do that for entire Grid (so that there will be a few columns/rows in Grid) or for one specific cell?