# Preview image for own themes

**URL:** <https://meta.discourse.org/t/preview-image-for-own-themes/389978>\
**Category:** Support\
**Created:** [November 30, 2025, 4:53pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978 "2025-11-30T16:53:25Z")\
**Posts on this page:** 1\
**Showing post:** 8

<div class="post-metadata">

**Author:** ![Moin](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/moin/32/554653_2.png) [@Moin](https://meta.discourse.org/u/Moin)\
**Post date:** [December 1, 2025, 2:40pm UTC](https://meta.discourse.org/t/preview-image-for-own-themes/389978/8 "2025-12-01T14:40:55Z")

</div>

> [@Roi](#):
>
> Is there any way?

It’s maybe a little hacky, but you can replace the default SVG pattern with a custom image with the help of CSS.  
Example result

 ![image](https://global.discourse-cdn.com/meta/original/4X/c/d/7/cd7944660184561b91dd989339087c09601109ed.png)

In the uploads section of your theme, you add the screenshot

 ![image](https://global.discourse-cdn.com/meta/original/4X/2/5/3/2532257d96ee7389531b6ee58d4faf0a5035fbcd.png)

and in the CSS tab of “edit code” you add

lowercase & replace spaces with hyphens

```css
.theme-card.=THEME_NAME= .theme-card__image-wrapper svg {
 display: none;
}

.theme-card.=THEME_NAME= .theme-card__image-wrapper {
 background-image: url($=UPLOAD_NAME=);
 background-size: cover;
 background-position: center;
}

```

I hope this is enough to bring a little more relaxation to your inner Monk.

---

_[View the full topic](https://meta.discourse.org/t/preview-image-for-own-themes/389978)._