Forum | Appery.io

I'm trying to have my background image repeat. Currently the repeat function is working on the standard 320 x 480 resolution, but when I go to a different one, the image cuts off. It looks like the mobilecontainer doesn't resize to the full screen width when it changes.

Here's a screenshot of the issue I'm having http://prntscr.com/681shj
and here's the code I'm using to display the background http://prntscr.com/681tnx

Essentially all I want to do is just have it repeat infinitely no matter the screensize.

Thank you!

In your css file you can do this

[dsid="mobile_container"] {
background-image: url("../image/myimage.jpg");
background-repeat: no-repeat;
background-size: cover;
}

You can comment the last line "background-size: cover;" out to not expand/shrink the image. But if you do that just remember that you have a large enough image.

And I believe that you are testing in the browser, in which case I don't think it acts in a responsive manner - because on your mobile apps, the orientation does change and it adapts but screen / viewport size does not change - in short you cannot resize the pages like the way it's done on a pc

I have the same issue testing on my iPhone as well. Is there no way to repeat the background?

Repeating the background is easy. All you need to do is

code
[dsid="mobile_container"] {
background-image: url("../image/myimage.jpg");
background-repeat: repeat;
}
/code

Unfortuantely I've actually never gotten it to work as a css call, I've always had to make it an onLoad js event. I'm targeting the mobilecontainer dsid but it never will display any bg image if done from style.css

Found out the issue. had to target ui-body-b class because it kept overriding

#startScreen .ui-body-b {

Thanks!

You can also add an "!important;". That will work as it will override properties it had previously inherited