Syntax for: "background-image: url( my local img tiddler );"

[Mat]

Using the tc-tagged-<tagname> technique you can style tiddlers individually.

But how do I set an image that I have as a tiddler, e.g Motovun Jack.svg, to be the background in some other tiddler?

The doc link above gives example:

background-image: url(./tardis_back.svg);

but this path is not relevant in this case and merely writing the name of the image tiddler does not work.

Assuming image tiddlers that are local (and work, i.e you do see the image), is there a difference in the above syntax depending on file types (png, svg...)

<:-)

 

[Birthe C]

Hi Mat,

\define datauri(title)
<$macrocall $name="makedatauri" type={{$title$!!type}} text={{$title$}}/>
\end

div.tc-tagged-cat{
background: url(<<datauri "Motovun Jack.svg">>);
}

Birthe

[Eric Shulman]

On Friday, August 28, 2015 at 2:01:25 PM UTC-7, Mat wrote:

Using the tc-tagged-<tagname> technique you can style tiddlers individually.

But how do I set an image that I have as a tiddler, e.g Motovun Jack.svg, to be the background in some other tiddler?

The doc link above gives example:

background-image: url(./tardis_back.svg);

but this path is not relevant in this case and merely writing the name of the image tiddler does not work.

To use the content of an image tiddler in your CSS, you need two things:

1) The 'type' field of the stylesheet tiddler should be blank (or set to "TiddlyWiki 5").  This allows the content to be "wikified", so that embedded macros can be processed

2) Use the <<datauri>> macro to fetch the image tiddler content and format it as a base64-encoded URI that can be embedded in the CSS, like this:

background-image: url(<<datauri "Motovun Jack.svg">>);

see http://tiddlywiki.com/#datauri%20Macro

enjoy,

-e

[Mat]

Great help from two directions simultaneously - thank you! :-)

More to come on the matter...

<:-)