Background images in gamebook

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.

image


image


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")

image


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%\"});")

image


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?


Log in to post a reply.

Support

Forums