Background image not covering full card

jojo55 · March 17, 2023, 3:58am

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.

If the background info (color, image, repeat, attachment, size) is in .card then the background color shows at the bottom. (made pink for emphasis)
If background info is in .body then the background color shows at the bottom. (made pink for emphasis)
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)
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;