How to create an image which permits text to appear on top of it?

Yo! Been a while since I had questions. Recently I've developed a hacking minigame for the player to perform when trying to gain access to password-locked computers, with various difficulties and all that jazz. Got a few more features for it planned, but it's mostly complete. As a result, I'm trying to see about jazzing it up a bit.

At the moment I've got some fun changes in font colour, 'terminal green' text, all that stuff. What I'd really like, though, is to be able to insert an image as normal, but have it set up so that text flows on top of it rather than wrapping around it or just being shoved below it, as the image in question is a mockup of an old-school terminal screen.

Before getting too far with making such a thing, I figured I should actually see if I can implement it in the way I wanted to, first. I've worked out how to set it as a background image, but that looks bad and it doesn't resize the image to frame (it has a black border around the edges to simulate a screen, though if worst comes to worst and I can't figure out a solution, I may just simply remove this and go with the background replacement method.)

I've done up a little mockup of what I'd like to accomplish, which can be found here;

This would be within the display width of the game, that's already handled by the script for inserting an image.

So, is this doable? Not the end of the world if it isn't, but I'm enamored with how it'd look, so I hope it is!

You probably want to do this using Javascript.

Off the top of my head…

section = StartNewOutputSection()
JS.eval ("$('."+section+"').css('background-image', 'url("+GetFileURL("SomeImage.png")+")');")
JS.setCss("."+section, "width: 650px; height: 380px; overflow: scroll;")

(Note: I'm not using JS.setCss for the image because it looks like it will break on properties which contain a colon; which URLs generally do.)

That sets a background image for the current section, and forces the section to be the right size for the image (change the numbers to the actual size of the image), causing the image to gain its own scroll bar if there's too much text inside it.

It's probably a good idea to store the section name in a variable somewhere.
Some functions such as ShowMenu will start a new section, exiting the image. So after running this (maybe as a turnscript?) you would move any new sections into the one that's displaying the image:

JS.eval("(function (s) {var img = $('.'+s).first(); img.nextAll('.'+s).appendTo(img);})('"+section+"');")

And then when you're finished, you would do:

EndOutputSection (section)

(bviously, replacing section with the attribute you stored it in)

Alright, nice, that gets me somewhere. I think I'll have to manually resize the image and reposition the text to get it looking right, but this should work just fine. Thank you!

You can add background-size: to the setCss line to resize the image, and use padding: to control the positioning of the text inside it.

It's probably a lot of work fine-tuning all the positions, but it's mostly going to be trial and error.

Oh, that might be easier than fiddling around with resizing the image itself. That said, once I know how big it'll be at maximum, I should probably resize it anyway for filesize purposes.

Thanks for the help! I'll play around when things become a little less frantic for me today.

I'm a bit stumped on how to properly use background-size, as so far everything I've tried hasn't changed the image at all.

In the CSS, you probably want either background-size: cover; (stretches the image to fit the div) or background-size: contain; (maintains aspect ratio, but shrinks the image to fit within the box). Alternatively, you can use actual sizes, such as background-size: 500px 350px;. Width then height. I'd expect it to work if you use the same dimensions you used for the width/height of the section, but there may be some fiddling to account for the border model.

It's a while since I played with this stuff. If it's not working, I can try to take a look when I get a break.

Huuuuugh this is frustrating.

Background-size and Padding both only work if they're at the very front of the setcss line. Trying to put them anywhere else in the sequence results in no errors, but no effect.

setCss ("."+section, "background-size: 1000px 485px; padding: 50px 50px; width: 900px; height: 480px; overflow: scroll;")

This got the image the right size eye-perfect, but then Padding doesn't trigger. I move padding in front of background size, it triggers, background size stops working.

I'm completely new to this sort of thing- is there some obvious missed/superfluous character I've left out/injected here?

Poked at it a few more times, but I'm still stumped. Padding or Background-size, but never both at once, and only if they're at the beginning of the string. Outside of realizing that 50px 50px is superfluous (just 50px works, applying that padding to all sides which is what I wanted), I'm no closer to understanding what no-doubt glaringly obvious thing I've typed wrong.

I'm trying it, and it seems to work fine.

Can you share a link to your game (or a test game which replicates the issue) so I can see what you're doing different?
(I don't have Windows, so for testing purposes I'm stuck on the web version of Quest)

Did you copy what I had exactly? If it works for you but inexplicably doesn't for me, then I don't know what testing it could solve.

I can send you a link to the project - I tried to throw together a test version of this, but it's nested within the hacking game code and it's a bit of a nightmare to peel it apart.


In a moment of madness I decided to just do lots of single-action setcss lines, one for each element adjustment, aaaaaaaaaaaaaaaaaaaaaaaand now it works fine. I'm again assuming that I've got some superfluous missing or additional characters gunking up the single-line version up there, but I'm now beyond caring.

Oh, also, I added in background-repeat: no-repeat to get rid of the tiling effect, which means I don't have to get this quite so ridiculously pixel perfect.

JS.eval ("$('."+section+"').css('background-image', 'url("+GetFileURL("Terminal_Screen.png")+")');")
JS.setCss ("."+section, "padding: 40px;")
JS.setCss ("."+section, "background-size: 1000px 500px")
JS.setCss ("."+section, "background-repeat: no-repeat")
JS.eval ("(function (s) {var img = $('.'+s).first(); img.nextAll('.'+s).appendTo(img);})('"+section+"');")```

That's how it looks in code view, in the end. It works, I'm not touching it any further, save my soul.

Maybe modifying both background-size and width and height properties for the same element confuses Quest?

Maybe modifying both background-size and width and height properties for the same element confuses Quest?

It doesn't appear to, unless there's a bug I haven't found in the setCss function. Although setting background: in the same line would cause oddities (because it resets the values of background-size, background-position, background-origin and background-attachment)

All I can guess is that a nonprinting character sneaked into the code somewhere, an invisible typo. (jQuery is pretty good at coping with stuff like wide spaces, narrow spaces, 'do not autohyphenate here' markers, and Greek colons in its CSS. Quest isn't so good where the impact isn't exactly as expected)

Eh, doing it multi-line works for me! At the end of the day the framework I'm building only really needs to be understood by me and me alone, if I decide to share it with friends I'll figure out how to streamline it then.

Thanks for the help!

This topic is now closed. Topics are closed after 60 days of inactivity.