[Solved] Html5 splash screen not sizing right

Questions
#1

Hey everyone!

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?

Thanks!

1 Like
#2

Hey everyone!

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!

10 Likes
#3

In the new standard html5 template there is no

{{#DEFOLD_SPLASH_IMAGE}}

How can I make the splash image responsive then?

#4

Oh, I looked at the wrong file. The code is not in the HTML template but in the custom css file.

For noobs like myself:

  1. In the editor copy /builtins/manifests/web/light-theme.css to your main folder (or any other folder)
  2. In the game.project under Platforms > HTML5 change the path to the Custom .css to your new file
  3. Add background-size: contain as described in the second post

BTW I think background-size: contain should be part of the default css files.

2 Likes