#background image

A bit of fantasy

I couldn’t be bothered to draw a background, so I used an image from the internet

^ Here’s the image in question.

Based off this legendary honse meme

Ah okay! I use Twine Sugarcube to code, so this won't work for any other story format. You can easily add a background image to the UI bar by adding something like this in the stylesheet:

Here, the background-image is where I'll add the source for the background image I want to include in my UI bar. You'll need to figure out media queries because different screens will display the image differently depending on the size of the image you're using.

I cheated because I didn't want to go through learning about media queries and just used a huge background image (think desktop wallpaper size) and because it was an image that I didn't really care how it appeared on different screens, it worked out fine for me.

In this example, I'm using a local folder/location for my images because I didn't want to rely on an image hosting site to do that, you'll just have a folder within your game folder named images (or whatever you want it called) and that's where you will add your background image for your UI bar.

So if your images folder is called pics and your background image is called bg_image.png, you will add something like this within your stylesheet:

#ui-bar: { background-image: [img[pics/bg_image.png]] }

In my example, I've added a background colour as well, in case the image fails for whatever reason and I've also added other properties to style the way I wanted the image to look. You'll need to fiddle around with it a bit to see what works best for you, but there is a high chance if you're looking for a specific format for your picture, you're going to need to use media queries especially if the game is going to be played on different devices such as phones and desktops.

Commissioned drawings from @beardedstrangerdreamland on Tumblr. A water lily and nature. Cute!

Water lily and nature [Art] - MiaQc - Original Work [Archive of Our Own]