Retrieve base64 encoded data from several content attributes

Question

Is there a way to optimize the use of base64 data in CSS by defining it once and referencing it in multiple content properties?

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

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

Using a class is not an option due to the need for compatibility with a CSS paged media selector:

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

Implementing JavaScript is not possible as the CSS is processed by a CSS paged media processor (Prince XML) rather than a browser.

Answer 1

Answer №1

Create a CSS class that includes an image:

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

Insert an element with that class into the HTML:

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

Set this element to be running:

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

Now, utilize it as required:

@page {

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

Answer 2

Create a CSS class that includes an image:

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

Insert an element with that class into the HTML:

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

Set this element to be running:

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

Now, utilize it as required:

@page {

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