Image Size to Fill Screen

cressidahubris

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. 

cressidahubris

The best I've gotten so far is 1366 px x 920 px.

greyelf

The size of the browser's viewport depends on a number of things like the resolution of the user's desktop, if the user is running their browser in full screen mode or not, etc...

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.

cressidahubris

I tried the CSS samples but I couldn't get them to work with the image I'm using.  It appeared unchanged.

greyelf

Could you upload a copy of your story HTML file for me to have a look at?

cressidahubris

I don't have the story created yet.  I was just experimenting with image size to make it fit on the screen... before I start making the images.  So I'm just using a patterned jpg so I can see what the image looks like (if stretched or distorted) as well as whether it goes all the way to the end.

greyelf

Can you use the "Build" menu option to create a HTML file containing the code that is not working for you so I can debug it to see what the problem may be.
The examples in the link work correctly in Twine when I use them.

cressidahubris

The only thing in the file is the stylesheet.  I haven't written anything yet -- just uploaded an image (1000 px x 800 px) and tried to fit it to the screen.  What I have in the stylesheet is (the name of the image I uploaded into Twine is stars):

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
}

cressidahubris

Noticed that the link also states that it works in:

    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.

greyelf

The image issue your having with modern iPads (and iPhones) is probably due to it having a Retina screen, which has a higher DPI.

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.


html {
background: [img[stars]] no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
html {
background: [img[stars_2x]] no-repeat center center fixed;
}
}


cressidahubris

Going to try this in a moment.  Really, everything is looking great on multiple screens except the iPad.  And one other thing, but I think I'll start a new thread about it because it's centering images above the background image.

cressidahubris

Okay, we're getting closer.  Put in a new image and this code, and it looked normal on the computer and closer to normal on the ipad.  So it appeared correct on the ipad except that it spilled off the screen.  I could scroll left and right and read the text in the passage, but I don't have to do that on the computer.  On the computer, it just loads and fills the screen.

greyelf

Was the base image you used for the Retina screen the correct aspect ratio? (eg. the width and height proportionally correct)
I believe that the image will be resized the same percentage in both directions because of the background-size: cover property.

cressidahubris

Definitely was in a 4:3 ratio.  I went with the normal iPad screen size: 1024 x 768.  Yes?  Did I do that wrong?

greyelf

cressidahubris wrote:

Definitely was in a 4:3 ratio.  I went with the normal iPad screen size: 1024 x 768.  Yes?  Did I do that wrong?

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.

cressidahubris

If I find a solution that works, I'll post it here and in an new thread with all the CSS so other people can have it.  Because while it looks great on all computer browsers, getting it to work on a mobile device has been such a headache. 

Thanks so much for your help with this!