how to embed background image via the base64 stuff?

Question

So, currently I have some background images that are just .jpgs. I have this in my css stylesheet:

body.one:before {
	content: "";
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -10;
	background: [img[images/gui/one.jpg]] no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

It seems to work pretty well, and I have this format so that it scales with cell phones. The only tiny little thing it does wrong is adjust the screen a bit when a scrollbar shifts the image over. But that's beside the point.

I see this website: https://www.base64-image.de/

I can use it to get the image converted into some kind of encoding.

But, there's two options.

A version for: For use as CSS background, which looks like this at the start:

url('data:image/jpeg;base64,/

And a version for: For use in <img> elements, which looks like this at the start:

data:image/jpeg;base64,/

I don't know which to use, really. Since I am using it as a background image. Any ideas?

Also, as for this css stuff. I chose it mostly because it seems to scale down with screen size and maybe retain image aspect. That that, on small screens, it looks mostly fine too. I found the code for this ages ago. But, is this a good way to do that behavior? I haven't looked into this much, since I'm happy with my play from before. But, I'm just curious.

Answer 1

As you're using SugarCube, I'd probably suggest using image passages.  If for no other reason than to keep your styles uncluttered by huge chunks of Base64.

Which compiler are you using again?

Comments

I'm using this: tweego-1.1.0-windows-x64.

Hey, but I'm using this: sugarcube-2.21.0-for-twine-2.1-local instead of the recommended sugarcube-2.21.0-for-twine-1.4 (for tweego). Is this something I shouldn't be doing?

I swapped over simply because sugarcube-2.21.0-for-twine-2.1-local started to suggest ifid codes when it didn't find any in my story files, which I found cute. The other version didn't do that at all, not that it really matters that much.

---

Hey, but I'm using this: sugarcube-2.21.0-for-twine-2.1-local instead of the recommended sugarcube-2.21.0-for-twine-1.4 (for tweego). Is this something I shouldn't be doing?

I don't know what you're referring to.  Where is that recommended?

Regardless.  Tweego ≥v1 may use either style (Twine 1 vs Twine 2) of story format, so it doesn't really matter which you use.

 

I'm using this: tweego-1.1.0-windows-x64.

That's actually convenient for you, as Tweego supports embedding images as image passages—n.b. an image passage is simply a passage with a special tag whose content is the Base64 encoding of your image.

All you need to do is to tell Tweego to compile any image you want embedded within your compiled project and it will make a image passage out of it.  The easiest way to do that is simply to place the images you want embedded within the same directory structure your twee source is within—I'm assuming you're keeping you twee code within a directory and simply telling Tweego to compile the directory.  Each image passage will have the name of the image, minus its file extension—e.g. the image passage for one.jpg will be named one.

To access the images within SugarCube directly, you may use either the [img[]] markup or an <img> tag with the data-passage attribute.  For example, using the image passage one:

[img[one]]
	/* OR */
<img data-passage="one">

To access the images within SugarCube as CSS property values, you must use the [img[]] markup.  For example, using the image passage one:

background: [img[one]] no-repeat center center;

 

---

Yeah cool. That's super useful. And I tried it out, and everything works. It's handy, since it's ll just one .html file now. I think I'll only put those gui-related ones into the html, with other images in some kind /image folder. That makes it the best of both worlds.

The only reason I thought was recommended was the wording you have on the download files:

SugarCube v2.21.0 for Twine 2.1 (local/offline) [ZIP archive] [125 KiB] – See the Twine 2 guide for installation instructions.

SugarCube v2.21.0 for Twine 2.0 (local/offline) [ZIP archive] [125 KiB] – See the Twine 2 guide for installation instructions.

SugarCube v2.21.0 for Twine 1.4, Twee 1.4, & TweeGo [ZIP archive] [124 KiB]

The only hint that any of these can or should be used with tweego is that the last says it can.

Just by the wording, I assumed that the first two were only to be used with the Twine 2 application.

---

The only reason I thought was recommended was the wording you have on the download files: […]

Ah, okay.  Prior to Tweego v1.0.0, that was kind of true as Tweego simply didn't support Twine 2 style story formats.  I'll update the wording there to clear up the confusion.