Background image not covering full card

[jojo55]

Sorry if any of my terminology is wrong, I am very much a CSS novice. I mostly use anki on desktop, so that is where my issue is.

I just want my background image to fill the full area of the card, no matter the size of the window. This should do what I want: background-size: cover; However, if my window is under a certain width, the image will not cover to the bottom.

1. If the background info (color, image, repeat, attachment, size) is in .card then the background color shows at the bottom. (made pink for emphasis)
2. If background info is in .body then the background color shows at the bottom. (made pink for emphasis)
3. If background info is in html then the background fills the full area, but the top toolbar is the canvas color. (I also lose the transparency of the boxes on the card itself)
4. If background info is in html, body then the background fills the full area, but is tiled in the top toolbar viewport.

I’m not sure which is the proper one to use for what I want, or if I need to use a different combination of properties.

The background properties I’m using in the screenshots:

 background-color: #ad379a !important;
 background-image: url("_cyan_ai_circles_light.jpg");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: cover;

[jojo55]

This ultimately doesn’t matter I guess? But for more information, the area that is pink or tiled is always 37 pixels (on a desktop monitor with 1920x1080 resolution) no matter what the size of the background image is.

I’ve also tried more things from these forums but none have worked:

img {
  max-width: none;
  max-height: none;
}

img {
  max-width: unset;
  max-height: unset;
}

img {
  max-height: 100vh;
} 

I’ve given up after that. Turning on Minimalist mode ‘fixes’ it. The top toolbar isn’t as fancy, but at least it’s predictable.

[kleinerpirat]

@jojo55

If the background info (color, image, repeat, attachment, size) is in .card then the background color shows at the bottom. (made pink for emphasis)

I’m aware of this issue with small aspect ratios and will try to fix this in a major update for user theming and global backgrounds that is coming some time after 2.1.61.

Currently the toolbars pick up the CSS background of the reviewer’s body.

I still have to decide which element will be the recommended one to set the background to. Ideally I find a dynamic solution where it doesn’t matter if you set it on the body or document itself - but that’s a bit involved.

[jojo55]

@kleinerpirat

I’m aware of this issue with small aspect ratios and will try to fix this in a major update for user theming and global backgrounds that is coming some time after 2.1.61.

Thank you so much for the reply! I had assumed I was just doing something incorrectly. If it’s something I can’t fix, then I won’t worry about it anymore.

A user theming and global backgrounds update sounds like something I will be looking forward to. Best of luck on it!