Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No parsing of transparent background for PNG images #196

Closed
wleoncio opened this issue Oct 8, 2020 · 4 comments
Closed

No parsing of transparent background for PNG images #196

wleoncio opened this issue Oct 8, 2020 · 4 comments
Labels
question Not issue, just a question

Comments

@wleoncio
Copy link

wleoncio commented Oct 8, 2020

Summary

PNG images with transparent backgrounds are rendered with white backgrounds

MRE

---
marp: true
---

<!--
	backgroundColor: blue
	color : white
-->

# Testing image

![w:500](http://www.pngall.com/wp-content/uploads/2016/04/Plum-Free-PNG-Image.png)

Expected result

Something like this (sans sloppy paintjob)
image

Obtained result

image

@wleoncio
Copy link
Author

wleoncio commented Oct 8, 2020

I just noticed that passing the image as a background makes Marp properly parse the background:

image

So maybe there's a workaround to make this also work for non-bg images, or maybe to position the bg image so it's properly placed (e.g. as a header, footer, or next to text).

@yhatt
Copy link
Member

yhatt commented Oct 8, 2020

Try to tweak the style of img elements.

<style>
img {
  background-color: transparent;
}
</style>

Marp Core default theme is depending on GitHub's Markdown style, and its style for <img> tag has white background color.

@yhatt yhatt transferred this issue from marp-team/marpit Oct 8, 2020
@yhatt yhatt added the question Not issue, just a question label Oct 8, 2020
@wleoncio
Copy link
Author

wleoncio commented Oct 8, 2020

That's all it took, thank you very much!

BTW, I actually find it convenient that the default theme is tied to GitHub's Markdown style (however featureless it is), but as someone with very rudimentary CSS skills, I wish this specific tip was part of the Marp documentation (I couldn't find it anywhere).

Cheers \o

@wleoncio wleoncio closed this as completed Oct 8, 2020
@yhatt
Copy link
Member

yhatt commented Oct 8, 2020

Thanks! I'll give your feedback to working unified documentation.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Not issue, just a question
Projects
None yet
Development

No branches or pull requests

2 participants