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:
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>.)