Background Image won't display

I have problems displaying background images in Jupyter Notebooks (defined with <div style='background-image: url("title01.jpg")>Text</div>). We would like to overlay text and images for the heading.

I provided a small example at (GitHub - christadler/Debug: Test repository for debugging), with links in README.md to open the notebook file in either binder/notebook or binder/lab, because Ex. (1) will display only in binder and only if you open binder in notebook style. It won’t show in “lab” nor on github or our local jupyterhub installation (not even in notebook mode). The path to the image is correct, it shows up if I just include it via markdown (Ex. 2), <img>-tag (Ex. 3) or python-code (Ex. 4).

I have no idea why this is not working as expected? Are some packages missing? Is this syntax not supported? Why is it working in binder notebook but not in lab? Why is it not working at all on our Jupyterhub installation (not even in notebook-mode)? On our server I am running Ubuntu 22.04 and Jupyterhub 2.3.1. If I am correct, binder uses Jupyterhub 3.0.0.

Let me know, if you have further questions. I really got stuck on this one.

Thanks, Iris

Relative URLs inside CSS are hard to reason about in a multi-document UX like Lab. There are special handling for img tags, and redirecting to files/{:parent-of-notebook} but parsing CSS is no mean feat at runtime.

A workaround would be to urlencode the image as a data URL.

2 Likes

Thank you for this clarification. We will probably upload the image on one of our webservers to be able to referene it as a (full) URL. Cheers, Iris