Problem with background-color change on png

Anki Card Design
1

Hey, I want to insert a following png in to my Anki-Flashcards. It has a transparent background, which appears black on the flashcard.

image
image1309×219 1.56 KB

To change the background I used
.img { background-color:white;}
image
image2066×1146 164 KB

As you can see on the preview on the right side - nothing happend.
Can sb please help me?
I already looked at a post on this forum, which seems to solve the same problem, but the code doesn’t work for me :frowning:
Thank you!

2

Does using img instead of .img solve your problem?

The dot creates a class selector - whereas img just applies to all images.

CSS can be a picky bitch sometimes.

3

No, nothing changed :frowning:
But thanks for the hint. I will keep this in mind :slight_smile:

4

Can you post the code from your Front and Back templates as well? I just pasted out your image in a blank card and it worked as expected for me.

5

Front:

Was ist die Reaktionsgleichung des Nachweises von:
{{Nachweis von}}

Back:

{{FrontSide}}
<hr id=answer>
{{Reaktionsgleichung}}

I use a mac. Could that be a problem?

6

If it is I have no way to verify it. And your template is so simple that I don’treally see that being the problem.

You could try pasting the image in the basic note to see if it works there. If that doesn’t fix it the last thing I could offer you is that you export your deck and share it on Ankiweb so I can check if it’s a problem with the deck or only on your machine.

It shouldn’t matter but what version of Anki are you on?

7

Hey,
sorry for the late response. I just uploaded the Anki Deck
https://ankiweb.net/shared/info/1771735364
My Anki version is:
Version ⁨2.1.56 (07fd88dd)⁩
Python 3.9.15 Qt 6.3.2 PyQt 6.3.1

8

Alright, I forgot Anki had a review period after decks are uploaded so I couldn’t see the deck immediately.

Anyway, are you aware that the image in your deck you uploaded is not a png? Maybe you reverted to .jpg because png didn’t work - just checking.

It’s got something to do with the images you paste, not your note type, because when I paste any png without background it works just fine. Btw you’re still using .img and not img - but that doesn’t make a difference here.

Where do you get the chem images from? Are they generated or from some textbook?

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.