Internal image as background in <div>

#1

Hello everyone,

I am trying to implement a background image with an internally stored image in a div/object environment, but I am failing due to the syntax:

<div class="content">
<object id="clock" data=clock.svg type="image/svg+xml" style="background-image: url (uhr-bg.png);">
</object></div>

“uhr-bg.png” is stored in /as a Tiddler.

Calling it up as an external image works.

Thank you very much for your time.

Guten Tag miteinander,

ich versuche in einer div/object - Umgebung ein background-image mit einem intern gespeichertem Bild zu realisieren, scheiter aber an der Syntax:

<div class="content">
...
</div>

“uhr-bg.png” ist im /als Tiddler gespeichert.

Ein Aufruf als externes Bild funktioniert.

Vielen Dank für Eure Zeit.

#2

I think this will help: datauri Macro.

#3

Good morning,

I used the following:
background-image: url (<<datauri "uhr-bg.png">>);

As a result, I get the following (the end is abbreviated)

background-image: url (data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAYAAACHjumMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAmhdJREFUeNrsvQeYZddVJrr2yTdXrq6q7uqcgzqrJcuy ZNlywAbD2M9ggx/ ...

When I insert the code, it seems to try to display the image as a data set.
Do I need to change the properties of the tiddler somewhere so that it renders the image?

Thank you very much.

Guten Morgen,

ich habe folgendes eingesetzt:

background-image: url (<<datauri "uhr-bg.png">>);

Als Ergebnis erhalte ich folgendes (das Ende ist abgekürzt)

background-image: url (data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARgAAAEYCAYAAACHjumMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAmhdJREFUeNrsvQeYZddVJrr2yTdXrq6q7uqcgzqrJcuyZNlywAbD2M9ggx/ ...

Beim Einsetzen des codes scheint er zu versuchen, das Bild als Datensatz anzuzeigen.
Muss ich irgendwo die Eigenschaften des Tiddlers ändern, damit er das Bild rendert?

Vielen Dank

#4

Remove the space between url and (

background-image: url(<<datauri "uhr-bg.png">>);

-e

#5

Thanks for the quick reply.

It seems to be a bit tricky because I can’t see any change in the result. Maybe I’m overlooking something.

I’ll try to describe the whole package:

  • There is a tiddler named: uhr-bg.png
  • The tiddler has the type: image/png

The image is displayed normally when the tiddler is called up.

I have the following call in a second Tiddler:

<div class="content">
<object id="station-clock" data=german-clock.svg type="image/svg+xml" width="150" height="150" style="background-image: url(<<datauri "uhr-bg.png“>>);”>
</object>
</div>

The type of the Tiddler is not specifically specified.

When I use the original formatting, the svg graphic is displayed, but the background “uhr-bg.png” is not.

Unfortunately, using “datauri” has not yielded any results so far, except for what is already displayed :frowning:

Thank you very much for your efforts.

#6

Nested double-quotes are not permitted within widget or HTML parameters

try this:

style="background-image: url(<<datauri 'uhr-bg.png'>>);">

Note how the surrounding style="..." uses double quotes, while the tiddler title parameter within the <<datauri '...'>> macro uses single quotes.

-e

#7

Thank you very much for your efforts.

Unfortunately, the result is that the background graphic is not displayed—nor is it displayed as garbled text, as it was in the meantime.

In order to avoid continuing to bother you with this problem, I have created a “quick fix” solution for now. Perhaps something else can be found later when there is more time.

Thank you very much for your commitment.

lösung
lösung915×974 39.2 KB

#8

I’m not sure whether/why this helps, but in some situations I’ve had better luck invoking the long-form version of the datauri macro, like this:

background-image: url(<$macrocall $name="datauri" title="Motovun Jack.jpg" $output="text/plain"/>);

(instead of the <<datauri ...>> form)

#9

Good morning,

Thank you very much. I’ll be traveling for the next few days. I’ll try it later.

See you soon.

#10

Good morning, quick status update—unfortunately, this method also displays the image as a data record for me.

Have a nice day, everyone!

#11

Thre is no $output parmeter on the datauri macro, I expect @Springer had another idea.

#12

Welp, I did copy that structure directly from tw-com: https://tiddlywiki.com/#datauri%20Macro%20(Examples)

AND, when I remove it, the result fails. So, it’s doing some work, even if $output parameter is not part of datauri macro. … [Updated to add: it’s a parameter of macrocall widget, thx @saqimtiaz.]

2 Likes
#13

$output is a parameter of the $macrocall widget.

1 Like
#14

this contradiction needs addressing

#15

I’ve sometimes had poor luck with specifying image/svg+xml as tiddler type. Instead, if the svg-containing tiddler just uses the proper enclosing svg tags, it gets parsed fine in default (unspecified) tiddler type, and it’s easy to embed it in other tiddlers with a simple transclusion as in {{german-clock.svg}} (no need for <object> html).

Here’s a demo with an svg tiddler transcluded into a div with an internal background. Perhaps comparing it to your situation will help you troubleshoot.

(And it does work fine when the image has the image/svg+xml tiddler type as well; you can swap the extension on Motovun Jack.jpg for the svg version (also imported to be available internally), and the div still renders with the svg in background.)

#16

What is/was the contradiction?

Did you see the note by @saqimtiaz and my subsequent amendment? There doesn’t seem to be any confusion over what parameters are accepted within which macro calls…

(Or maybe you’re flagging that the output is "text/plain" even though it’s ultimately an image we’re working with? But I think this just means that the datauri macro itself is putting out something that plays fine with surrounding wiki text, no? The style declaration is “reading” and digesting the data for the image rather than taking the image itself as input, right?)

#17

Only the documentation unless the $output parameter is available on the datauri macro

#18

As Saq pointed out, it’s documented as a parameter for the macrocall widget itself.

#19

Good afternoon,

Thank you very much for the demo, as it works in a test tiddler.
I will investigate why it has been stuck so far.

Thank you very much.

1 Like