Background image won't repeat on screen resize

[Elliot Lombardo]

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!

[M&M]

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

[Elliot Lombardo]

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

[M&M]

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

[Elliot Lombardo]

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

[Elliot Lombardo]

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

#startScreen .ui-body-b {

Thanks!

[M&M]

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