I have been messing around with the html5 splash screen and have create an appearance that I like, however it only works for the original image size of 960x640. When shrinking the screen the image stays it’s normal size and just gets cut out by the page border. Is there a way to fix this or an idea size for the splash page I should use?
I was able to figure out the issue. Essentially I was thinking about it wrong, instead of trying to find the right sized image I needed to scale the image on the html5 page. After some experimentation and research. I found that adding: background-size: contain; to .canvas-app-canvas allows the image to scale with the window.
I copy / pasted the built in css file and added the code to this part to create this:
.canvas-app-canvas {
background-repeat:no-repeat;
background-position: center center;
{{#DEFOLD_SPLASH_IMAGE}}
background-image: url("{{DEFOLD_SPLASH_IMAGE}}");
{{/DEFOLD_SPLASH_IMAGE}}
{{^DEFOLD_SPLASH_IMAGE}}
background-size: 70%;
background-image: url(...); /*keep the long URL featured in the built-in css, not featured in this forum post to save space*/
{{/DEFOLD_SPLASH_IMAGE}}
background-size: contain;
}
Hope this helps anyone who was dealing with the same issue!