Make scene background fill browser screen

Saola Animate Support Questions
1

Is there a way to make each scene’s background color (or image) extend out and fill the browser window no matter what the window is sized to?

So in other words, each scene have it’s own background color that fills the browser window, regardless of the window size. ( So it would not have vertical white bars showing on left and right side of scene ).

bars
bars1463×928 29.3 KB

2

Hi Locky,

You can set scene width and height to 100% in Properties pane.

Regards

3

Hi ToanSL,

Thanks for your reply. I do see how that works, but I notice when you make the scene 100%x100% it does fill the background completely…but… it also shifts all my elements to the left and when you resize the page, elements don’t scale bigger and smaller and keep equal distance.

I think you gave an answer about this to someone some time back and you said, when the scene is set to 100% x 100%, you also have to change each element’s coordinates from px to %.
AutoFit works nicely with the scene set to PX, but then the background color doesn’t fill the screen. I wish it were possible for them to work together.

I did figure out how to use CSS and make the document background color fill the screen, but that is for the whole document and if you give the scene a color then you have two colors happening, the document background and then the rectangle of scene color on top of that.

As a work around, I can at least put a full screen button on each scene, and then the scene’s background color fills the screen when you go full screen.

4

Hi Locky,

AutoFit must keep the scene aspect ratio, otherwise your content (elements, texts…) will be distorted.
There’s no way to keep the aspect ratio and fit the scene to the entire screen when the screen and the scene have diffferent aspect ratio, even going to fullscreen.

If you still want to use the AutoFit feature, the only option is changing document background as you said. You can add script to scene activate event so that document background will be the same as the current scene background.

var bodyStyle = document.body.style;
var sceneStyle = doc.getScene().dom.style;
var backgroundProps = 'Color Image Repeat Position Size'.split(' ');
backgroundProps.forEach(function(prop) {
	prop = 'background' + prop;
	bodyStyle[prop] = sceneStyle[prop];
});
sceneStyle.background = '';

Regards

5

Hi ToanLS,

Thanks for that code, sorry to sound a bit dumb :roll_eyes: but where do I place that code? Does it go in the Edit CSS or somewhere in the Edit HTML?

Oh wow…nevermind, I just figured out how to do that “scene activate” event. It WORKS! Thanks so much for that code, it’s exactly what I was needing!!! :smile:

ToanLS, can the same code be altered to work when you are using a resource image for the background… and fill the screen with the image instead of color?

—> I did get the resource image to show by changing your code from backgroundColor to backgroundImage , but it TILES across the screen, is there a way to make it not TILE and just be one image on the screen?

1 Like
6

Hi Locky,

I’ve updated the script in my previous answer.
It will make the document have the same background style as the scene.

Regards

7

Hi ToanLS,

That is PERFECT! Works like a charm. Thank you so much, I would have never figured that out.