# 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:** 3

<div class="post-metadata">

**Author:** ![JustinBack](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/justinback/32/133266_2.png) [@JustinBack](https://meta.discourse.org/u/JustinBack)\
**Post date:** [March 6, 2019, 11:40pm UTC](https://meta.discourse.org/t/background-svg-distinguished-posts/110850/3 "2019-03-06T23:40:28Z")

</div>

that is interesting! I didnt know you can add HTML markup to the CSS. I’ll try this now and get back with the results.my JS code worked for a bit but makes hamburger button unclickable

> **My CSS Approach**
>
> ```
> .distinguished-post-wrapper-marking {
> height: 100%;
> width: 100%;
> //Added for when parent has padding
> overflow: hidden;
> position: absolute;
> }
> 
> .distinguished-post-marking {
> opacity: 0.5;
> transform: rotate(-15deg);
> fill: #F3910F;
> margin-top: 8px;
> }
> 
> ```

> **My JS Approach**
>
> ```
> $( document ).ajaxComplete(function() {
> $('div.group-Employee').each(function(){
>         
> if($(this).children('div.distinguished-post-wrapper-marking').length <= 0){
> $(this).prepend('<div class="distinguished-post-wrapper-marking distinguished-post-wrapper-marking"><img class="distinguished-post-marking distinguished-post-marking" src="https://cdn.pixelcatproductions.net/f/p/b0a106ab1c4e3d6c3b3e6969647d8f3aaf9c6984f739714e4ce04988a8414b83a2713ce7786281d7dc1003142dafe2ee8b96/TransparentBlackText.svg" width="200"></img></div>');
> }
>         
> });
> });
> 
> ```

Not sure why it bugs out but sometimes wont show the logo in the background either, only on one distinguished post.

---

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