EPUB conversion doesn't handle CSS background-image property in style attributes

[rtonsing]

See source for ebook #25344.

This is an example of the code causing the critical errors, it is a relative reference:
<div class="backright" style="background-image: url(images/illu_057.jpg); height: 100%;">

The error is:

2025-07-13 12:00:23,906 CRITICAL  #25344 ERROR(RSC-030): /export/sunsite/users/gutenbackend/cache/epub/25344/pg25344.epub/OEBPS/8134824478036869322_25344-h-1.htm.html(767,1): File URLs are not allowed in EPUB, but found "file:///public/vhost/g/gutenberg/html/files/25344/25344-h/images/illu_057.jpg".
ERROR(OPF-014): /export/sunsite/users/gutenbackend/cache/epub/25344/pg25344.epub/OEBPS/8134824478036869322_25344-h-1.htm.html(766,0): The property "remote-resources" should be declared in the OPF file.

output.txt

In the current epub3 (posted in 2021), those images are missing.

When I use Calibre to convert the HTML, the styling appears to work OK, see attached screenshot. The OPF file does not declare "remote-resources". It passes epubcheck.

If at all possible, it would be ideal to allow this property. It has long been a desire at PGDP to handle wrapping of text around images, or even overlapping.

Calibre produced epub - mangles page numbers, but otherwise looks good.
25344-epub.zip

[windymilla]

I believe this method is no longer recommended because it often does not render well on paged devices. It looks OK to me in my browser, but the epub does not display well for me in ADE or in Calibre ebook viewer. See respective screenshots below:

ADE:

Calibre illo page (note illo cropped at bottom of page and pale text on white background):

Calibre, next page (note cropped illo, and overlapping text below):

[srjfoo]

@windymilla's Calibre examples are exactly what would happen for me. I always read with light text on a dark background (not sure about the overlapping text, but definitely the alll-but-unreadable text on a white illlustration background).

[rtonsing]

ADE is weird for me, it displays it OK, but then keeps the image on page down, overlapping it with text.

So I agree there are enough issues that it currently should not be allowed. I will experiment to see if there is a workaround. The dark mode handling is a real problem.

Yet another case of ereaders not keeping up with browsers.

I will rework #25344 to remove the issue (argh!).

You can close this if you wish.

[windymilla]

I will rework #25344 to remove the issue (argh!).

Just making that a regular (maybe figright) illo would maybe be sufficient for this case?

[eshellman]

ADE is weird for me, it displays it OK, but then keeps the image on page down, overlapping it with text.

So I agree there are enough issues that it currently should not be allowed. I will experiment to see if there is a workaround. The dark mode handling is a real problem.

Yet another case of ereaders not keeping up with browsers.

I will rework #25344 to remove the issue (argh!).

You can close this if you wish.

@rtonsing could you post the file(s) that caused the error please?

[rtonsing]

25344-h.zip

[eshellman]

The problem is caused by having the background image reference in a style attribute. It works well if you move the css to a style element.

So insteead of

<div class="backright" style="background-image: url(images/illu_057.jpg); height: 100%;">

use
in head:
<style>#illu_057 {background-image: url(images/illu_057.jpg); height: 100%;}</style>

then use
<div id="illu_057" class="backright" >

This is technically a bug in ebookmaker's epub making code, but as there is a workaround, and the bugfix is a bit complicated, I will not be able to address it for a while.

Eric