# Setting the top toolbar background image

**URL:** <https://forums.ankiweb.net/t/setting-the-top-toolbar-background-image/29137>\
**Category:** Card Design\
**Created:** [April 7, 2023, 12:11pm UTC](https://forums.ankiweb.net/t/setting-the-top-toolbar-background-image/29137 "2023-04-07T12:11:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dualsense](https://avatars.discourse-cdn.com/v4/letter/d/c4cdca/32.png) [@dualsense](https://forums.ankiweb.net/u/dualsense)\
**Post date:** [April 7, 2023, 12:11pm UTC](https://forums.ankiweb.net/t/setting-the-top-toolbar-background-image/29137/1 "2023-04-07T12:11:54Z")

</div>

“picsum.photos/200/300.jpg” is the URL that shows the image randomly.

I set up the css like this

```auto
.card {
    background-image: url("picsum.photos/200/300.jpg");
}

```

And in the Front Template, I added this

```auto
<script>
var img = document.createElement('img');
img.src = 'picsum.photos/200/300?random=' + Math.random();
document.querySelector('.card').style.backgroundImage = 'url(' + img.src + ')';
</script>

```

I wanted a background image that changed randomly.

It works, but…

![CleanShot 2023-04-07 at 20.53.33](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/4/4b3d108ea4c442099cca4830276ed3d301fa8546.gif)

 ![CleanShot 2023-04-07 at 20.53.57](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/4/485d7ba413dd15e8a3374391ac3b4e13dd9bbce6.jpeg)

The top toolbar is not working as I intended.

Is there any way to apply a background image except for the top toolbar?

---

<div class="post-metadata">

**Author:** ![kleinerpirat](https://sea2.discourse-cdn.com/flex002/user_avatar/forums.ankiweb.net/kleinerpirat/32/19863_2.png) [@kleinerpirat](https://forums.ankiweb.net/u/kleinerpirat)\
**Post date:** [April 7, 2023, 1:23pm UTC](https://forums.ankiweb.net/t/setting-the-top-toolbar-background-image/29137/2 "2023-04-07T13:23:19Z")

</div>

The background is copied at the time of the card flip and doesn’t wait for any changes made via JS afterwards.

We could troubleshoot this, but I think it will be easier for you to just wait for the next big Anki update, which will not have the issue to begin with.

For now you could hide the toolbar during review (there’s a setting for that in the preferences).

---

<div class="post-metadata">

**Author:** ![dualsense](https://avatars.discourse-cdn.com/v4/letter/d/c4cdca/32.png) [@dualsense](https://forums.ankiweb.net/u/dualsense)\
**Post date:** [April 7, 2023, 2:20pm UTC](https://forums.ankiweb.net/t/setting-the-top-toolbar-background-image/29137/3 "2023-04-07T14:20:47Z")

</div>

Is this the setting to hide the toolbar?

 ![CleanShot 2023-04-07 at 23.18.03](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/2X/6/634d5a8e63e118bca49b6ded090fc4aa82a3472b.jpeg)

Too bad it doesn’t hide the background image.

I’ll wait for the next big update.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex002/uploads/anki2/original/1X/8f1279ababc5879d54e4838989f606cfe55af8c7.jpeg) [@system](https://forums.ankiweb.net/u/system)\
**Post date:** [May 7, 2023, 2:21pm UTC](https://forums.ankiweb.net/t/setting-the-top-toolbar-background-image/29137/4 "2023-05-07T14:21:10Z")

</div>

Closed on May 7, 2023, 2:21pm UTC

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.