#pro-penlicker

[lapinlunaire-games]

my issue is specifically the background image getting blown up to fit (poor wording on my part, apologies) and becoming blurry

i'm sourcing from images from unsplash and using the url i get when i open the image in a new tab

No worries! I see - when you copy the URL from the new tab, Unsplash adds on some parameters to the link to compress the image so it's smaller/faster to load. If you delete everything in the URL after the question mark (including the question mark itself), that should serve the image at a bigger size and higher resolution so it won't be blurry.

A word of warning though: I highly recommend saving the image in a folder with your Twine HTML file and using a relative URL instead of hotlinking with the URL straight from Unsplash, at least for your final published build if not during the WIP process.

That way, your project won't be dependent on Unsplash's servers or yoink its bandwidth and you'll never have to worry about the image not loading/loading slowly. This does mean it's slightly less convenient to playtest using the Twine editor's "play" button as the images won't load that way, but imo keeping the HTML file open in a browser tab and just save to file + refreshing it to make changes isn't the worst alternative.

mini tutorial on how to use relative URLs under the cut for anyone reading who isn't familiar : )

Create a folder to save your HTML file and assets in. In this example, we'll call the folder "Project".

Save the HTML file and your background image in Project. Let's say the background image is a jpg called "image". If you have lots of other assets like fonts or more images, you can organize things more by creating subfolders for each category instead of having everything floating around in the one big Project folder.

Replace the value of --BGimage with your new relative URL: if you didn't create any subfolders, this will just be "image.jpg". If you need to go "down" a level into a subfolder, include the name of the folder followed by a slash and the name of the image file (example: "subfolder/image.jpg")

Save to file in Twine and refresh the page in your browser.

[lapinlunaire-games]

hellooo, im currently using your template Leonora for two of my projects and im having trouble with the BGimage url. when i paste in the link and test the game, the img remains blurry. (full screen or not)

i'm unfamiliar with css and asking on google isnt helping me either.

i downloaded the .html file and and changed the IFID

Hi! Thank you for using my template!

Leonora has some built-in blur on the background images. On the title page, the whole background will be blurred and on all the other passages, the blur will be just where the yellow highlighted box is. To remove it, open up the CSS Stylesheet and scroll to where it says #passages (in I. INTERFACE)

Delete the first line "backdrop-filter:blur(6px);". If you want to remove the blur from just the title page, don't delete anything and add ".splash #passages {backdrop-filter:none;}" after the last curly bracket instead.

If it's still blurry after changing the CSS, check the size/resolution of the image you're using. If the dimensions of the image are small relative to the screen, it could be blurry because it's getting blown up to fit.