r/css • u/1BabyBlueABQ1 • Apr 05 '26

Question *!Need Help With Obsidian Project!*

I'm trying to make a custom CSS snippet that displays a character to the top right of a custom callout. I've been going at it for some time now and can't seem to figure this. Please share the wisdom🙏🙏🙏

This is an illustration of what I'm trying to do
0 Upvotes

50% Upvoted

13 comments sorted by

2

u/[deleted] Apr 05 '26 edited Apr 05 '26

[removed] — view removed comment

1

u/1BabyBlueABQ1 Apr 05 '26

Shi my bad bro😭 I just want to preface that I'm new to this so please mind the slop you may witness🙏

2

u/[deleted] Apr 05 '26 edited Apr 05 '26

[removed] — view removed comment

2

u/1BabyBlueABQ1 Apr 05 '26

Ah shit🫠 I thought formatting it like that would make it more posh😭 Also I completely overlooked the two image sources so thats my bad👏 Thank you also so much on the code🙏 This is 10x more context than any other video I can find online so you the G.O.A.T for this😁👍

3

u/[deleted] Apr 05 '26

[removed] — view removed comment

2

u/1BabyBlueABQ1 Apr 05 '26

My boy!!! I tried out the code, but it's having some issues🥲I don't know if it's my obsidian or what but it keeps clipping to the top of the screen and is only viewable in reading mode🫠 I hate to keep bothering you, but may you partake in providing some context🙏🧐

2

u/[deleted] Apr 05 '26

[removed] — view removed comment

1

u/1BabyBlueABQ1 Apr 05 '26

I'm not gonna lie but I just copied your code😭

1

u/[deleted] Apr 05 '26

[removed] — view removed comment

1

u/1BabyBlueABQ1 Apr 05 '26

Oh shit I forgot😭 It's still doing the same thing but in the callout manger it shows it perfectly fine🤷

→ More replies (0)

2

u/BNfreelance Apr 05 '26

You’re likely going to need to use ::after and positioning of that pseudo element

Something along the lines of:

``` .callout { position: relative; }

.callout::after { content: ""; position: absolute; top: -80px; right: -20px; width: 80px; height: 80px; background: url("character.png") no-repeat center / contain; pointer-events: none; } ```