The image I use does not resize on mobile after making it an app with PhoneGap.

Question

It does use the desired space on my computer screen, but on my phone it shows up way too big. It also rotates from vertical position to horizontal position when I rotate my phone, how can I keep it on place?

This is how I have it on my stylesheet:

body {
	background-image: url("bckgrnd.png");
	background-repeat: no-repeat;
	background-size: cover;
    background-attachment: fixed;
}

 

Answer 1

You didn't say what kind of phone you have or what browser you're using, but based on the problem you're describing, I'm going to guess it's an iPhone and you're using Safari.  The reason why I guess that is because the iOS version of Safari has buggy behavior with "background-size: cover;" when used on "body".  See the "Known issues" tab at CanIUse.com for "background-cover".

I haven't thorougly tested it, and I don't have an iPhone handy, but I have something you could try.  First, put this in your Stylesheet section:

#storybody {
	background-image: url("bckgrnd.png");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed;
	position: fixed;
	width: 100vw;
	height: 100vh;
}

and remove the "body" code that you had above.  Next, put this in your JavaScript section:

$("#story").wrap("<div id='storybody'></div>");

What that will do is wrap the "story" <div> inside of a "storybody" <div>, and then the background will be displayed on the "storybody" div, instead of the "body".  (See the jQuery .wrap() method for details.)

Hopefully that will work, but like I said, I haven't tested it.

As far as keeping it from rotating goes, that I don't know.  You'll likely have to Google an answer specific to the OS and browser that you're using.  The answer is probably somewhere on the Stack Overflow site already.

(Note: The above assumes you're using SugarCube.  If you're using some other story format which doesn't have a "story" <div>, then you would likely need to wrap the "storybody" <div> around some other <div>.)

Comments

It worked, thank you. Just adding the width and height parts was enough (for some reason, when I add the rest, it won't let me scroll the text anymore). I'm using an Android phone and about the browser? I'm not really sure (I don't know about coding, just been following instructions), but I believe its chrome.

---

Cool.  I just noticed the scrollbar problem and came back to fix it, but you already got it licked.

Glad you figured it out.