Changing Background Color Per Deck for Whole Card with Scroll

Anki Card Design
1

I would like to have a different background color for every deck I create. I am new to CSS and have tried a bunch of tactics.

My main issue is the only way I can get the background color to cover the entire card is to use a fixed layout. If I use fixed layout, I can’t scroll when I have larger images or a code block.

I used this post below for help. I can change the image base on tags. I can change the color and font based on name of subdeck. I just can’t get the background to be the entire card and scroll.
CSS in Anki — Beyond the basics

This is the code I have. (The mobile class for the image isn’t working either, but the background is my bigger issue).
Front:

<div class="card {{Subdeck}}">
{{Front}}

<br>
<br>
{{Second line of text}}
<br>
<div class=leftblock>
{{Left Align Front}}

<img class="context_image {{Tags}}" />

</div>

Back:

{{FrontSide}}

<br>
<hr id=answer>

{{Back}}

<br>
<br>
<div class=leftblock>
{{Left Align Back}}
</div>

<div class=obsidian>
{{File Link Field Obsidian}}
<br>
{{Context Field Obsidian}}
</div>

Styling (version that let’s me scroll):

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  color: black;
 background-color: transparent;
}

.card.Python {
  font-family: "Novel Display";
  color: rgb(255, 223, 118);
  background-color: rgb(31, 65, 94);
}

.card.CPP {
  font-family: "Source Code Pro";
  color: rgb(229, 173, 35);
  background-color: rgb(0, 135, 143);
}

.card.Pi {
  font-family: "Giulia";
  color: rgb(196, 25, 73);
  background-color: rgb(0,0,0);
}

.leftblock{
  text-align: left;
}

.obsidian{
font-size: 10px;
}

img.context_image
{
 width: 30px;
 height: 30px;
 position: absolute;
 top: 10px;
 left: 10px;
}

.mobile.img.context_image {
 width: 25px;
 height: 25px;
}

.python {content: url("python-logo.png"); }
.cpp {content: url("cpp-logo.png"); }
.rpi {content: url("RPi-Logo.png"); }

If I add the following to the .card class, it looks perfect but I can’t scroll:

 position: fixed;
 top: 0px; bottom: 0px; left: 0px; right: 0px;
 background-color: transparent;
 z-Index: -1;

Any advice or guidance would be appreciated.

2

Try the following:

Front:

<div class="bgcolor-layer {{Subdeck}}"></div>
<div class="container {{Subdeck}}">
    {{Front}}
    <br>
    <br>
    {{Second line of text}}
    <br>
    <div class="leftblock">
        {{Left Align Front}}
        <img class="context_image {{Tags}}" />
    </div>
</div>

Back:
same as your post

Styling:

.card {
    font-family: arial;
    font-size: 20px;
    text-align: center;
    color: black;
    /* Can be changed to something other than transparent */
    background-color: transparent;
}

.bgcolor-layer {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
}

.bgcolor-layer.Python {
    background-color: rgb(31, 65, 94);
}

.bgcolor-layer.CPP {
    background-color: rgb(0, 135, 143);
}

.bgcolor-layer.Pi {
    background-color: rgb(0, 0, 0);
}

.container.Python {
    font-family: "Novel Display";
    color: rgb(255, 223, 118);
}

.container.CPP {
    font-family: "Source Code Pro";
    color: rgb(229, 173, 35);
}

.container.Pi {
    font-family: "Giulia";
    color: rgb(196, 25, 73);
}
...
...
...

P.S. I think that the class name card should not be used in front and back templates because it has already been assigned to <body> element internally by Anki program.

3 Likes
3

Thank you so much!! I’ve been trying to solve this for 3 days. And thanks for explaining the element issue.

1 Like