Different Background Images to Anki Cards

Card Design
1

Hey everyone,

I’m trying to improve my Anki cards by adding background images, but I’m having trouble getting it right now. Each card has its own unique background image copied into the collection.media folder, and I’ve dedicated a field for the image names (Field: “Background” with the content of “_first_img.jpg”).

I would like these images to fit the card size perfectly without stretching them.
(Proportional scaling up or down is OK.)
I’d also like to reduce the opacity of the images so they don’t interfere with the text on the cards.

I’m a little bit lost on what to place in the Front Template, Back Template, and Styling sections to achieve this effect. Any guidance or tips would be greatly appreciated!

Thanks in advance for your help!

2

I’ve tried:

background-image: url("{{Background}}");
background-size: 100%;

This didn’t quite do the trick as media references to fields aren’t supported. :frowning:
Do you happen to have any other tricks that might help me out?

3

you can use javascript!
try this in your template:

<script>
document.querySelector(".card").style.backgroundImage = `url({{Background}})`
</script>
4

Thank you. I gave it a shot, but the background image only pops up when I flip the card to the back. The front still shows up with a plain background.
This is my front template, let me know if I messed up something:
The image is only 2000x2000px, but it loads very slowly.

<h1>{{Header}}</h1>
<hr>
{{Front}}

<script>
document.querySelector(".card").style.backgroundImage = `url({{Background}})`
</script>
5

Maybe adding a short delay could help. Try this:

<script>
setTimeout(()=>{document.querySelector(".card").style.backgroundImage = `url({{Background}})`}, 5)
</script>
1 Like