I'm trying to get a margin image to frame my game properly (ie scale to the screen size and not just repeat itself). I've found a temporary solution in sizing the image exactly for my monitor but it obviously fails in different size windows. Ideally I'd be able to use separate images for the left and right margin but I'm unsure as to whether that is even possible. I don't know too much about coding so any help would be appreciated.

Thanks!

As far as I can tell by a quick skim over the code, the game area defaults to 950 pixels wide, or the full width of the screen if that is smaller. Within that, the main text area is also 950 pixels wide, or 700 if the sidebar panes are enabled. The panes are 216 pixels wide, and are placed 255 pixels to the right of the centre line.

So, if you're just looking for an image for the margins, I suspect the easiest way to do it would be to make a large background image with a 950-pixel blank area in the middle (or a faint pattern that won't make text hard to read, if you want it to appear behind the actual game content), and ensure it's centred. This way, the same amount will be cut off the left and right sides. You can also disable the background repeating horizontally, so that people with insanely large monitors see one copy of the background, and then flat colour outside of that (and maybe have a gradient fill at the edges of the image so that it fades smoothly to the solid colour.

The CSS would look something like:

body {
  background-position: center top;
  background-repeat: repeat-y;
  background-attachment: fixed;
}

or to set it in script:

SetBackgroundImage (your filename)
JS.eval("$('body').css({backgroundPosition: 'center top', backgroundRepeat: 'repeat-y', backgroundAttachment: 'fixed'});")

If your background image is set up with hard edges that want to be aligned to the edge of the window (rather than to the edge of the game area), then you probably want to scale it instead:

SetBackgroundImage (your filename)
JS.eval("$('body').css({backgroundRepeat: 'repeat-y', backgroundAttachment: 'fixed', backgroundSize: '100%'});")

that will stretch the background image to fit the width of the screen, and repeat it vertically as necessary.

If you want the image to appear once at the top of the screen it would be backgroundRepeat: 'no-repeat' and if you want to stretch your image to fit the window both horizontally and vertically it would be backgroundSize: '100% 100%'.

If your margin image has two hard edges, so it needs to be stretched to fit between the edge of the screen and the game area (or so it wants to be centred between them), you would need to create an element to contain them. I'd recommend a javascript function something like:

SetMarginImages = function (limg, rimg) {
  if (limg) { ($('#leftMargin').length ? $('#leftMargin') : $('<div>', {id: 'leftMargin', style: 'z-index: -10; position: fixed; left:0px; top: 0px; height: 100%; background-repeat: repeat-y; background-size: 100%; background-position: center top;'}).appendTo('body')).css({backgroundImage: 'url(\''+limg+'\''});}
  if (rimg) { ($('#rightMargin').length ? $('#rightMargin') : $('<div>', {id: 'rightMargin', style: 'z-index: -10; position: fixed; right: 0px; top: 0px; height: 100%; background-repeat: repeat-y; background-size: 100%; background-position: center top;'}).appendTo('body')).css({backgroundImage: 'url(\''+rimg+'\''});}
  $(window).resize(function () {
    $('#leftMargin,#rightMargin').width((window.innerWidth - $('#gameBorder').width())/2);
  }).resize();
};

once that function exists in Javascript, you can call it from Quest using something like:
JS.SetMarginImages(GetFileURL("leftmargin.jpg"), GetFileURL("rightmargin.jpg"))

(wow, I didn't realise I'd spent so long typing that. Hope some of it is useful to you)

Thanks for such a complete write up! This is super useful.

One quick follow up question about the Javascript. I presumably need to write that up outside of Quest. Do I need to do that in a special programme or just notepad? and once completed where would I save it?

(sorry I'm really new to coding)

EDIT: I've worked it all out now. Thanks!

I have a similar question about the rest of the script, actually. Can that be copied directly into the game portion of code view in Quest? It doesn't appear to be the same language and right now copying in does nothing.

Thanks!

EDIT: Again, I've solved it. thanks!