But what I really want to do is have a field (“tidbg” in this case), and store the location of a local background image in it, then have it picked up and displayed in the Tiddler.
Something like this:
< div class="tidframe" style="background-image: url({{!!tidbg}});" >
I already do this with the ‘img’ tag:
< div class="imgcent">< img src={{!!previmg}} >< /div >
but I cannot seem to find a syntax that will work with background-image
The problem is that attribute values are not “wikified”. As a consequence, embedding {{!!tidbg}} “simple transclusion” syntax directly within the style="..." attribute value does not actually insert the tidbg field value into the CSS syntax.
Fortunately, there is still a way to achieve your goal by using “filtered transclusion” syntax to assemble the desired CSS syntax attribute value, like this:
Geez, is there anything you don’t know about TiddlyWiki?
I can’t pretend to decipher what’s going on with that line, my eyes (and brain) sort of go fuzzy when looking at a long filter or statement like that, but it solves my dilemma so I’m happy.
While looking a tad simpler than Eric’s answer above, I was not able to get it to work.
I suspect it has something to do with the use of ‘header’ vs. my use of a div, but I’m not sure.
Then, in the desired tiddler, add a field named class with a value of “bg1” (or “bg2”)
or, to apply a background image to a specific element: <div class="bg1">
Using this method has some definite advantages:
All background images are defined in one stylesheet tiddler
No complicated filtered transclusions or macro definitions
Backgrounds can be applied to any element using simple CSS classname references
Backgrounds can be combined with other CSS classnames and styles, e.g.,
With regard to “tiled” backgrounds:
By default, if you don’t specify any background-repeat style attributes, images are automatically tiled (i.e., repeated in both vertical and horizontal directions).
Thus, on https://TiddlyWiki.com, if you including the following in the “Backgrounds” stylesheet:
You can then add a class field with value bg4 to any tiddler (e.g., “HelloThere”), and that tiddler’s background will be tiled with a “pinstripe” repeating pattern.
Note: I have a number of “texture” images that I have published on https://TiddlyTools.com. Just use the regular sidebar search and enter “texture”. You can then drag-and-drop any of these textures to your own TiddlyWiki, and use the technique described above (i.e., a “Backgrounds” stylesheet tiddler) to define and use class names for those textures.
For locally-stored image files, use the _canonical_uri method to define a tiddler that refers to the external image file. See https://tiddlywiki.com/#ExternalImages. Then use the <<datauri "TiddlerName">> syntax in the “Backgrounds” stylesheet, as shown in my previous example.
At the moment, your previous solution is better for the TW I’m working with, as I’d like to keep the BG link in the Tiddler itself, but I can definitely see using the Stylesheet method on a couple of other TW’s.
Welcome to the community @Chan_Droid and for a productive question, and thanks @EricShulman I particular like the textures you pointed us to.
I am just adding this method to my own documentation, a few notes;
It can make sense to include color for the text within the background CSS for readability eg color: white; for a dark background.
I am keen to use this class field method but limit the background to the tiddler body, or everything but the body, just the title and other customisations.
Perhaps a new topic to build a collection of using backgrounds methods?
Thank You for the welcome, @TW_Tones – I’ve actually been around here for years, just under another nick (Zaphod) in the Google Groups, and have been inactive for a long time…
Yes, I’m using a light background-color with dark text for one of the modified Tiddlers with the new backgrounds, with an opacity of 0.8. More creative souls could surely whip up some interesting-looking Tiddlers by playing with color, background-color and opacity.
I experimented quite a bit with opacity ‘back in the day’ (2016) when I created a SideBar Shade plugin for use with full-screen backgrounds in TW. But looking at the coding now, I can remember little to nothing of how it worked or how I created it (thank you, old age…)
the current palette to use (with associated buttons to edit/clone/delete the palette definition)
a list of CSS class elements to bind to backgrounds (with associated buttons to edit/clone/delete element definitions)
a list of images, color names, and palette items to apply to the currently selected CSS class element (with associated buttons to edit the selected image and set filters for the list of images and list of colors.
buttons to set background-size (center, scale, width, height, stretch, tile) and background-position (“pin” vs “scroll”) CSS display options
a checkbox to “toggle thumbnails” so you can view all current background bindings at once.
you can also click on a background image itself to toggle between full-size and thumbnail images
Note that all class-to-background bindings are palette-specific, so if you are using a “dark” palette (which typically has a light text color), you can apply dark backgrounds, but if you are using a “light” palette (which typically has a dark text color), you can apply light backgrounds.
