Responsive stage and symbols

Forum|Forum|3 years ago
September 7, 2022
1 reply
229 views

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?

Code

This topic has been closed for replies.

JoãoCésar17023019

Community Expert

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

R

Rob_NZAuthor

Known Participant

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ésar17023019

Community Expert

Awesome!

Just make sure to test on different devices and browsers.

Please let me know if you need something else.

Regards,

JC

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded