Does anyone know the size an image needs to be to fill a screen (using sugarcane -- not sure if it's matters). 1024px x 768 px (typical iPad screen) was too small. 1920 px x 1080 px (typical computer screen) was too large. Obviously something in between. I can keep plugging away until I find the best size, but I wondered if anyone else had already figured this out.
Comments
Instead of trying to resize the image file so it naturally fits whatever size the user may be running their browser in, you should use CSS to resize the image when it is being displayed.
This article explains on how to do so and the first example works in Twine. The image used in the example is only 1024x683 pixels.
The examples in the link work correctly in Twine when I use them.
html {
background: [img[stars]] no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.passage {
font-size: 14px;
color: #000000
}
Safari 3+
Chrome Whatever+
IE 9+
Opera 10+ (Opera 9.5 supported background-size but not the keywords)
Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
But the problem I'm having specifically is how it looks on the iPad screen. Something can look fine on the computer but looks awful on the iPad screen. The image will stretch to fit on the Mac, but it doesn't on the iPad.
Is this tied to the fact that I removed the sidebar? I've noticed that the text isn't really centered. It's sort of to the right. As if the sidebar is there even when it's not.
You will need (at least) two different background images, a normal DPI one for most screens, and a higher DPI for the 2x Retina screens.
This article lists some CSS @media queries that may solve your problem.
eg.
I believe that the image will be resized the same percentage in both directions because of the background-size: cover property.
Based on the display info from Apple that should be the right size.
Looking on-line I see a number of posts / articles about the problems with background image (re-)sizing on iOS, and a number of different ways people try to get around the issue. This article alone has 4-6 different methods, the CSS/javascript combo near the bottom is for iPhones.
I don't have access to an iPad to test which method works best for one.
Thanks so much for your help with this!