How do I resize picture to fit any screen resolution?

Hello, forum!

I have a few questions and I am hoping you guys can answer. I have scoured the internet for an answer but can’t seem to find exactly what I am looking for, whether that be my own error or that there is nothing of this sort out there yet is regardless.

I am creating an interactive fiction using Twine 2, Harlowe, both the latest edition as of 3/1/21, and I plan on having this play out more like a game rather than a point-and-click novel, and with that in mind I want a GUI that matches the tone of what I am going for.

To cut it short, I am wanting to size a background image as the GUI base layer and have variables and words positioned over-top the layer to give the illusion of a full intact GUI. To do this, I need the background to resize to any computer screen at full screen play. For instance, if the background image is created in, say, 780 x 1080 resolution, I want that image to fit any screen resolution. I know that I gave a small resolution for the image to be stretched, but it is for sake of reference. I am going to have the image drawn much larger and then hopefully be able to shrink it to fit any screen resolution.

With that out of the way comes another problem: words, positions, and size of text.

The basic image is shown below, and in the left column will be 3 options at all times: Menu, Load, and Save. If the screen resolution changes and the background image with it, I have a good idea of how to keep those words in place to always match, but will there come a resolution where the words become larger than the boxes provided for them? If the answer is “yes”, perhaps I should only have the interactive fiction played in full screen on one’s monitor, yeah? And with THAT, will I run into the same problem?

I know this is a lot to unpack, and I do apologize if my question is too convoluted; I tried to be as precise as possible.

The image:
Mesa_de_trabajo_1-100.jpg (1920×1080) (discordapp.com)

The way you wanna approach this, it will be going to break on every occasion. It is better if you have an actual sidebar, which you fill with a flat color, and have the menu text as an ul, put some padding and border-radius and a fill color in the li’s.

That is by far not a precise manual on how to do it, but technically this is the same as if you would structure and style a fairly common website. The image would be only the winterscene without any UI elements then, and you can make it fit with “background-size: cover;” or “contain”.

Please do not keep posting the same question over and over. This is the third time you’ve posted the same question in the last two days (time #1 and time #2) under two different logins. Doing this is considered spamming in most forums.

If your question isn’t answered the first time, becoming annoying by pestering with it over and over is only going to make people less willing to help.

You should not create a new thread every time, and instead post any responses to questions or additional information within the original thread.

Thank you.

Actually, this is my partner. I didn’t know he already posted. I (MODOK) am the actual author of the game and have recruited a helper to seek answers and to help me along with coding. I do sincerely apologize on both of our behalves. We are not trying to spam at all.