Page 1 of 1

Background image won't repeat on screen resize

Posted: Sat Feb 21, 2015 6:07 pm
by 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!


Background image won't repeat on screen resize

Posted: Sun Feb 22, 2015 5:22 am
by 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


Background image won't repeat on screen resize

Posted: Sun Feb 22, 2015 3:17 pm
by Elliot Lombardo

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


Background image won't repeat on screen resize

Posted: Sun Feb 22, 2015 6:18 pm
by 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


Background image won't repeat on screen resize

Posted: Sun Feb 22, 2015 7:21 pm
by 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


Background image won't repeat on screen resize

Posted: Sun Feb 22, 2015 7:29 pm
by Elliot Lombardo

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

#startScreen .ui-body-b {

Thanks!


Background image won't repeat on screen resize

Posted: Mon Feb 23, 2015 1:41 am
by M&M

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