I've poked around the forums but haven't found anything actually helpful. I usually can use basic html code to do things in gamebook, but nothing I've tried to get a background image has worked. Does anyone know the code to insert a background image to a page? (Having the text on top of the image.) Thanks.

..bump?

Hello.

If you had an image named "pic.png" in your game's folder, you could add this code to set a background-image:

JS.eval ("$('body').css('background-image',\"url('"+ GetFileURL("pic.png") + "')\");")

Alternatively, to make the image fit the screen and not repeat the image:

JS.eval ("$('body').css({\"background-image\":\"url('"+ GetFileURL("pic.png") + "')\", \"background-repeat\":\"no-repeat\", \"background-size\":\"100%\"});")

NOTES:

To ensure this will not be lost if a saved game is loaded, add the code to the game's "Script when entering a page" script.

Alternatively, if you only want a certain page to have a background image, put the code in that page's script, but make sure any page it will link to has a script which will set the background image to none (or to a different image).

To make set the opacity of the text (so you can see the background image through the text):

// Adjust the opacity value as needed.
JS.setCss("#gameBorder","opacity: 0.8")

Thanks for responding! However, copy pasting this in does not work. Are there symbols or any text that I am supposed to omit? It just shows the string of text, so I can tell it isn't even acknowledging it as code. I am not using the desktop version, only the online editor. Most attempts at css I've tried so far won't work, which is why I've stuck to regular html. But the standard background image inputs are not working.

Those are scripts.

You should see a dropdown above the page description which is set to "text" by default. Change that to "script + text". Then, paste the code into code view.

NOTE:

To use an external image:

// Set the url
img = "https://i.imgur.com/6wnnvTlb.jpg"
JS.eval ("$('body').css({\"background-image\":\"url('"+ img + "')\", \"background-repeat\":\"no-repeat\", \"background-size\":\"100%\"});")
// Adjust the opacity value as needed.
JS.setCss ("#gameBorder", "opacity: 0.8")

For instance body background="blah.jpg" /body would be what common sense tells me, now this text does not appear so it is trying to read it. Is it just an issue of being unable to find the actual image I'm calling? I haven't tried using a url, just files that are inside the game already. I've considered that perhaps the background color's opacity is covering it, but I don't know how to effect that.

I see. In all my other pages leaving it as a text page still reads all the code I've entered, like a basic html web page. I'm curious why it works with everything else I've done so far, but is resisting background images. Thanks a ton.

Oh, I see what has happened. This is not what I wish to accomplish. I don't want an image behind the area of text, I want the actual text to be ontop of the image, and the image only being inside the field where the text is. Does how I'm describing this make sense?

In all my other pages leaving it as a text page still reads all the code I've entered, like a basic html web page. I'm curious why it works with everything else I've done so far, but is resisting background images.

You're probably creating elements with in-line CSS.

We have to use Javascript and/or CSS to modify the display settings of the default HTML elements.

This is where I learned how to fool with the CSS using JS:
http://docs.textadventures.co.uk/quest/ui-javascript.html

Oh.

Try this:

img = img = "https://i.imgur.com/6wnnvTlb.jpg"
JS.eval ("$('#gameBorder').css({\"background-image\":\"url('"+ img + "')\", \"background-repeat\":\"no-repeat\", \"background-size\":\"100%\"});")

If you're using images you've uploaded to your game, use this:

img = GetFileURL("FILENAME.png")
JS.eval ("$('#gameBorder').css({\"background-image\":\"url('"+ img + "')\", \"background-repeat\":\"no-repeat\", \"background-size\":\"100%\"});")

Hooray! Yes, that is exactly what I needed. I really appreciate the help :-)

I'm bumping this back up, another question. I'm not familiar with JS at all, how do I add box-shadow to this?

Hello.

img = GetFileURL("FILENAME.png")
JS.eval ("$('#gameBorder').css({\"background-image\":\"url('"+ img + "')\", \"background-repeat\":\"no-repeat\", \"background-size\":\"100%\",\"box-shadow\":\"2px 2px 2px pink\"});")

You're just adding this to what you already have: ,\"box-shadow\":\"2px 2px 2px pink\"

Replace 2px 2px 2px pink with whatever settings you'd like.

yes, that example works, but I've been trying to use "inset" with it. No effect. Trying to get the sides of my images to blur. I'd also like to do the same with images that are not set in the background. Not sure why inset won't work.

Also, being as that code would be plugged into the entire game's border, it isn't just giving a box shadow on the IMAGE. It frames the entire page. I'm looking for an effect that only frames the images. Softening the edges so they aren't such sharp rectangles. I've also wondered, is there not a simpler way to get a background image? I haven't found one, just seems like over kill to do it this way.

bumperoonie!

It would be easiest to use an image-editing program to alter your images rather than do it in Quest, at least whenever possible.

Adding 1 code to be applied to all the images would be much simpler than editing every individual one. Also, using 1 code for them all would add uniformity.

Not all of the CSS works in Quest, or sometimes it doesn't work in exactly the same way. Mrangel said that the version of Chrome that Quest uses is not up to date, and that there are bugs in it regarding how it handles CSS.