Image in CSS with "content"-attribute
Opened this issue · 7 comments
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
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"/>
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.
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. */
@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.
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);
}