# Combining a regular and a random image aligned within a CSS Grid **URL:** \ **Category:** Card Design\ **Created:** [May 1, 2021, 2:19pm UTC](https://forums.ankiweb.net/t/combining-a-regular-and-a-random-image-aligned-within-a-css-grid/9691 "2021-05-01T14:19:39Z")\ **Posts on this page:** 2\ **Page:** 1

**Author:** ![werner](https://avatars.discourse-cdn.com/v4/letter/w/f4b2a3/32.png) [@werner](https://forums.ankiweb.net/u/werner)\ **Post date:** [May 1, 2021, 2:19pm UTC](https://forums.ankiweb.net/t/combining-a-regular-and-a-random-image-aligned-within-a-css-grid/9691/1 "2021-05-01T14:19:39Z")

Hi, I have a new workflow and a new CSS & HMTL for adding images to my Anki deck that I would like to share and maybe get your feedback on it. My aim was to achieve a tile design, within each tile an image gets parsed in. The tiles have a fixed width and their size is not changing responsively as I find such elements rather irritating. The only way I could find a solution for a tile design was using the CSS codes “background-size: cover” and “background-position: center center”. I tried my best with an img src and CSS “object-fit: cover” but I couldn’t get it to work. The image wouldn’t cover the entire thumbnail frame. I also looked at the solutions listed in this article: [css - How can I fill a div with an image while keeping it proportional? - Stack Overflow](https://stackoverflow.com/questions/14142378/how-can-i-fill-a-div-with-an-image-while-keeping-it-proportional) Again, it didn’t work. Why do I combine a regular with a random image? I choose the regular image because it is the one that is closest to my association of the meaning of the word. It is also a backup image because it seems like you cannot store the previously fetched random images in Anki’s library, so it comes handy if I don’t have wifi. The random image has the advantage that it gives me a new visual cue every time I study the card. So I don’t get bored or visually fed up with the “old” regular image over time. This is the workflow and the solution I came up with: A field for the random image fetched from [unsplash.com](https://unsplash.com) using a visual keyword in English: field: {{visual}} example keyword: read (or reading) A field for the regular image containing an image that is stored in the media collection: field: {{image}} I use this addon to download multiple images from [unsplash.com](https://unsplash.com): Batch Download Pictures From Google Images: [Batch Download Pictures From Google Images - AnkiWeb](https://ankiweb.net/shared/info/561924305) These are the settings for the addon: ![grafik](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/b/b001ee63255ed27be889bc841ae3c08f26df3737.png) I select a single image of my liking (cut), delete all the remaining (cmd + A) and paste the selected image back into the field (paste). The HTML and CSS only work with a single regular image due to the javascript currently in use. CSS on the card layout (Front or Back): ```auto ``` HTML and Javascript: ```

``` Narrow view: ![grafik](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/f/f082b6c50141e01ee538bf2f0074c7cdfb5dd9c1.jpeg) Broad view: ![grafik](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/0/011db7a1ddc14207621d419bb592e6bafd9a71ac.jpeg) The CSS and HTML is a result of a lot of trial and error, so it could be somewhat messy. If you have any suggestions for improvement, I’d be grateful. I couldn’t figure out so far how to suppress 404 error images from unsplash: > **[r/Anki - Ignoring 404 error images from unsplash](https://www.reddit.com/r/Anki/comments/n26c7q/ignoring_404_error_images_from_unsplash/)** > > 1 vote and 7 comments so far on Reddit bajo-el-olmo provided a solution and it does work on the first card but the code stops working on all consecutive cards on a Mac. I assume that the javascript code only gets executed once. I don’t know how to force Anki to refresh the code on every card. So currently, you would see in case of an error message something like this: ![grafik](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/a/a46d6b854155d5698a4b54c5c5ef67826a708943.jpeg) ---

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\ **Post date:** [May 1, 2023, 7:40am UTC](https://forums.ankiweb.net/t/combining-a-regular-and-a-random-image-aligned-within-a-css-grid/9691/2 "2023-05-01T07:40:35Z")