is there a way to have an image in the background of tiddlers?

[Dave]

I'd like to have either an image, or different color or texture in the tiddler background (independent of the main background),
preferrably on a tiddler by tiddler basis (i.e. based on the tag of the tiddler), or if that doesn't work, all tiddlers.

Is this possible?  I was surprised to come up empty on a search for "tiddler background image"

I did find this:

http://tiddlywiki.com/#datauri%20Macro
&
https://groups.google.com/forum/#!searchin/TiddlyWiki/tiddler$20background$20image/tiddlywiki/BkNJFUGtP90/CDEJiwTLCAAJ

but they only seem to put an image as a tiled part of a tiddler, the image repeating, without the ability to have text over top.


I was hoping more for the kind of effect you'd have on a powerpoint slide with a faint image in the background and the tiddler text over top.

Thanks,
Dave

[Hegart Dmishiv]

Hi Dave,

I think what you want is this: How to apply custom styles by tag.

I've been using this technique a lot lately. In my current semester project for the {{DesignWrite}} course, I'm even transcluding a field, from a field in a separate "configuration" tiddler, into the CSS tiddler, then from there into the CSS code itself, so that the end-user can change the background by simply pasting in a different URL into an <$edit-text> widget. Here's an example of the end result, as it comes through via a ViewTemplate.

Hegart.

[Dave]

That's perfect Hegart, thank you!!

[Eric Shulman]

On Sunday, April 10, 2016 at 8:41:56 PM UTC-7, Dave wrote:

I'd like to have either an image, or different color or texture in the tiddler background (independent of the main background),
preferrably on a tiddler by tiddler basis (i.e. based on the tag of the tiddler), or if that doesn't work, all tiddlers.

Is this possible?  I was surprised to come up empty on a search for "tiddler background image"

You can define a ".tc-tagged-..." class to set the background CSS attributes.  For example, create a tiddler, tagged with $:/tags/Stylesheet, containing:

.tc-tagged-jack {

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

}

and then create a tiddler tagged with "jack".  This tiddler will automatically get a class of "tc-tagged-jack" applied to it by the TWCore and, due to the CSS rule defined above, the tiddler's background will show "Motovun Jack.jpg".... Q.E.D.

enjoy,

-e

[Dave]

Thank you Eric - that's perfect.  I just found pictures of old paper and used that as the background - looks pretty good!

https://dl.dropboxusercontent.com/s/w758idl15heqelo/BibleReliability.html?dl=0

(its a presentation I've been working on for a church function - beware - large file because of all the images)

[Ed]

Hi Eric,

works great for me too. Can now show a background with subtle color like: #f9fff9
Is it possible BTW to use in any way such color hex codes right away instead of
referring to a jpg- tiddler? Generated on the fly so to say, or is that weird thinking?

Thanks again Eric!
Salut! Ed.
======


Op maandag 11 april 2016 07:38:10 UTC+2 schreef Eric Shulman:

[Mat]

Is it possible BTW to use in any way such color hex codes right away instead of

referring to a jpg- tiddler? Generated on the fly so to say, or is that weird thinking?

Sure, in the stylesheet simply

.tc-tagged-... {background: #f9fff9;}

[Ed]

Grazie. Danke schön. Mercie Bien. Spasibo, Dankjewel, DoublePlusThanks. Etc.
Great Mat!
Salut! Ed
=======



Op woensdag 13 april 2016 14:13:38 UTC+2 schreef Mat: