reference base64 data in multiple content properties

Question

Instead of having the same base64 data multiple times, is there a way to define it once and reference it in multiple content properties?

div#my_id1 {
    content: url(data:image/png;base64,...);
}

div#my_id2 {
    content: url(data:image/png;base64,...);
}

I can not use a class, because I need to be able to use it with a css paged media selector:

@page main_content:left {
    @top-left {
        content: ...

I can also not use javascript, because the CSS is not rendered by a browser but a css paged media processor (Prince XML).

Answer 1

create CSS class containing the image:

.logo_image_data {
    background-image: url(data:image/png;base64,...);
    background-size: 300px;
}

Add an element with that class to html:

<div id="running_logo_image" class="logo_image_data"></div>

Make this a running element:

div#running_logo_image {
    position: running(logo_image);
    background-repeat: no-repeat;
    display: inline-block;
}

And use it where it is needed:

@page {

  @top-left {
      content: element(logo_image);
  }
  ...
}