Image in CSS with "content"-attribute

[ghost]

Hello,

I have the problem, that in the generated PDF I don't see the images, which I addes in css:

Example 1:
.toc:before { content: url(../img/test/logo.jpg); }

Example 2:
@bottom-left { content: url(../img/test/logo.jpg); }

When I test it in html I see the image, so the code should be correct, but in the generated PDF there are no images. When I put only text in the "content"-Attribute I see this text in pdf, but image not.

Have you an idea for the issue?

Best regards,
Fabian

[danfickle]

Hi @kuhlware

We don't currently support the url function in the content property. However for your page margin example, you could use a running element as demonstrated in #201

PS. Please leave this issue open as it is something we should support.

[ghost]

Hi @danfickle,

okay thank you! I have the problem, that I should have to show an image in pdf. It also doesn't work if I put an image in html. There is always a blank space. Do you know what's the problem? I want to do this as a hotfix, until you implement the "url()"-Problem, but doesn't work, too.

<img src="https://test.de/test.jpg"/>

[danfickle]

It should work, unless you are also running into #212 ?

[hbcondo]

Hi, this issue is a couple years old but I wanted to follow-up and see if there was any progress made in supporting the url function in the content property. Thanks.

[danfickle]

Hi @hbcondo,

I just implemented images in the content property. Unfortunately, despite my best efforts the images are behaving as blocks rather than inline-blocks. This probably is just annoying to me and not a practical issue since you would only run into it if you are adding other content items in the same content property.

content: "Hello " url(world.png); /* Works */
content: url(hello.png) " World!"; /* Incorrect layout, the world will be below hello.png rather than beside it. */

[hbcondo]

@danfickle is the man! This is a nice addition to an already great library. Thanks for the quick reply and commit; looking forward to seeing the PR and release for this.

[danfickle]

OK, now images specified in the content property list act correctly as inline-blocks rather than blocks. This feature will be released with the next release.

For best results, you may need to specify the box as inline-block also:

#three::after {
    display: inline-block;
    border: 2px solid pink; /* Optional border */
    background-color: orange; /* Optional bg color */
    /* Multiple items may be specified in the content list */
    content: url(../../demos/images/flyingsaucer.png) "..." url(../../demos/images/flyingsaucer.png);
}