Image does not render when using a Local File as Background in a CSS file

[rusty3379]

Originally, I had difficulty getting any of my local images to display but after I found #47 I used the tips within to get my local images to display as expected when the image is referenced is in an HTML file.

(In particular, I used MarticPicc's solution of loading a png as a base64 string into the HTML itself)

I tried to apply the same practices to the CSS file I am using alongside the HTML, but the advice does not seem to work.

1. Absolute path:

I tried using the absolute path for the image referenced in the CSS and the resulting image did not generate with the background applied.

CSS File:

.text {
    background-image: url("C:/My/Absolute/Path/to/the/Image.png");
}

2. URL

Did not try using a URL and would vastly prefer not to, but if no other solutions are known, I can try this.

3. Load_File method:

CSS File:

.text {
    background-image: url("image.png");
}

Py File:

hti = Html2Image()
hti.load_file('image.png')

#Open and read the file
with open('data.html', 'r', encoding='utf-8') as file:
    html_content = file.read()

with open('data.css', 'r', encoding='utf-8') as file:
    css_content = file.read()

hti.screenshot(html_str=html_content, css_str=css_content, save_as='html2image.png')

4. Change Temp Directory

I tried this method and was not able to render anything in the resulting png. (Created a transparent file) CSS File:

.text {
    background-image: url("relative/path/in/project/folder.png");
}

Py File:

hti = Html2Image(temp_path='./')

# Open and read the file
with open('data.html', 'r', encoding='utf-8') as file:
    html_content = file.read()

with open('data.css', 'r', encoding='utf-8') as file:
    css_content = file.read()

hti.screenshot(html_str=html_content, css_str=css_content, save_as='html2image.png')

5. (Bonus) Base64 Encode

I used MartinPicc's solution to encode my images in Base64, but google says that css files cannot accept encoded images, and after trying it one the css, also does not appear to work.

Does anyone know of any method to get a local png file to be used as a background image as defined in a css file?

[vgalin]

Hello, I've tried to reproduce the issue with the following code :

from html2image import Html2Image

css = """
.text {
    background-image: url("C:/path/to/bg.png");
}
"""

html = """
    <div class="text">
        This is some text with a background image!
    </div>
"""

hti = Html2Image(keep_temp_files=True)
ret = hti.screenshot(html_str=html, css_str=css)
print(ret)

But the generated image is generated with a background image. If you use keep_temp_files=True like I did, you should be able to check your %TMP%/html2image directory and find an HTML file. This file can then be opened using chrome/edge/etc. to check how it is rendered by the browser. You can use this file to debug your html/css : if it does not have a background image when viewed from the browser, screenshots also won't have it.

[rusty3379]

Thanks for the help!

Your code snippet worked as expected for me, but I feel like I might be missing a vital step somewhere else.

I used the keep_temp_files=True to keep the html file generated, and when I open that file in my browser (Chrome), I see what I expected to see. But the screenshot captured does not match the browser.

As far as I can tell, the screenshot is a 8kb file of an entirely transparent image.

[vgalin]

Could you share the html file you're using, or at least a minimal version of the html file that would allow to reproduce the issue?

[rusty3379]

Yes! I attached a zip with the file structure I am using as well, I worry that might play a role in it. The actual 'look' of the file is still in progress, all I am working on right now is getting the background image (the parchment.png) to display.

I threw a bunch of stuff in the file, if you need more, let me know! CSS_Local_Image_as_Backgroud.zip

Before zipping/submitting I made sure that the HTML file generated in the html2image_Temp folder correctly displays what I intend it to when I open it in a browser.

[vgalin]

Thanks! I modified the two python files a little bit so that every path are correct on my machine, I also used absolute paths just to be sure.

I'm generating the following image using Test.py, it seems to have a parchment background as intended:

When using GithubSubmission.py, I get the following image:

Text areas seem to have parchment as a background. Is everything like it's supposed to be? If yes, could you try to update html2image using the following command :

pip install --upgrade html2image

Recently, Chromium had some breaking changes with how headless mode works, and older versions of html2image don't work anymore. As you're getting blank/black images, I hope this will fix the issue for you.

[rusty3379]

Thanks for getting back to me!

I'm still having some difficulties -- when I open the HTML file that is generated by html2image, the browser correctly shows what I expect (identical to the image you captured) but the .png generated is nothing but a transparent file - no content.

Do you know why the browser (chrome) version of the file and generate png could be different? (at this point, this might be a different issue so I can open a different ticket if you prefer)

I made sure that html2image was updated and checked that I am on the latest version of chrome.

[rusty3379]

I was able to resolve the issue by passing an absolute path for my temp_path argument instead of the relative path or not passing anything at all.

Thanks for all the help, much appreciated.

[vgalin]

I'm glad to hear everything is working properly now! Your use case for html2image and your project sound really interesting. If you'd like, feel free to share more about it in this thread I just opened: https://github.com/vgalin/html2image/discussions/170

Have a nice day and have fun with your project.