# Background SVG distinguished posts

**URL:** https://meta.discourse.org/t/background-svg-distinguished-posts/110850
**Category:** Development
**Created:** [March 6, 2019, 12:14pm UTC](https://meta.discourse.org/t/background-svg-distinguished-posts/110850 "2019-03-06T12:14:17Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [March 6, 2019, 4:42pm UTC](https://meta.discourse.org/t/background-svg-distinguished-posts/110850/2 "2019-03-06T16:42:40Z")

</div>

It looks like their implementation goes beyond simple CSS changes because that SVG is added to the markup, but this should also be possible with CSS alone…

I think this should get you most of the way there

```SCSS
.topic-post.moderator {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    display: block;
    width: 100px;
    height: 100px;
    background: url('data:image/svg+xml;utf8,
<svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" width="100" height="100"><path fill="currentColor" d="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z"></path></svg>');
  }
}

```

---

_[View the full topic](https://meta.discourse.org/t/background-svg-distinguished-posts/110850)._