Responsive stage and symbols

[Rob_NZ]

I have a background image that fills the browser window and is responsive in width when the browser window is resized. I've achieved this by using "stretch to fit" in the publish settings. What I'm stuck on is having a logo on top of the background image that is also responsive and shifts when the browser window is resized. For example, the logo sits at the top right of the browser and when resizing the width and height of the browser window I'd like it to remain at the top right. Currently when the browser window is less than the width of the stage I lose the logo.

Is their a way of doing this purley using JS and not having to use CSS?

[JoãoCésar]

Hi.

Animate only fits the content inside of the browser inner area like it was positioning/scaling a video or image.

If you don't want this behavior you would need to write a responsive code yourself and position stage elements like in a regular website development.

Alternatively, if all that you want is to keep the logo at the top right corner of the inner area, then I think that using a img tag and some CSS will be easier.

Please let us know what you think.

Regards,

JC

[Rob_NZ]

Hi JC,

Thanks for your advice. 

I'm far from a guru at coding but I managed to come up with a solution based on your advice. I used JS to keep the logo responsive to the top right corner when the browser window is resized:

var page_body = document.getElementsByTagName("body")[0];
page_body.style.overflow = "hidden";
page_body.style.position = "fixed";

function onResize() {
var w = window.innerWidth;
var h = window.innerHeight;
exportRoot.Logo.x = w - 220;
exportRoot.Logo.y = 180;
}

window.onresize = function () {
   onResize();
}
onResize();

I also wanted a background image that was responsive when resized and ended up using CSS:

html {
background: url(images/Wallpaper.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

It's not the cleanest code but everything is working perfectly to how I wanted it.....so far. 

[JoãoCésar]

Awesome!

Just make sure to test on different devices and browsers.

Please let me know if you need something else.

Regards,

JC