Banner Images + Icons (Experimental) & More Image Options (CSS Snippet)

Copy the snippet here: Github - CSS Banners, Icons (Experimental), and other Image Options

With the help of @efemkay’s banner image code in this thread, I managed to make a snippet that enables banner images (which come in 3 styles that can be toggled with the Style Settings plug-in). The banner height can be changed with Style Settings as well.

In addition, the snippet allows circular profile-esque images, page icon images (Warning: experimental feature that is commented out by default, and also glitchy), and floating images to the left or right.

I highly recommend leaving the icon features alone if you’re using a mobile device, because the icons end up in weird positions on mobile.

How it Works

Css Classes

  • obsidian-banner - type this in the frontmatter after cssClasses to enable the banner image.
  • obsidian-icon - type this in the frontmatter after cssClasses to enable the icon image.

Image Alts

Example of an image alt (banner): ![banner](image.png)

  • banner - makes the image the banner image.
  • higher - positions the banner image higher.
  • lower - positions the banner image lower.
  • circle, profile, or round - typing any of these will make the image circular in shape, like a profile picture.
  • left - floats the image left.
  • right - floats the image right
  • icon - turns the image into a title icon.

A Warning About the Icon Feature

The icon features is…not very well-programmed. I apologize. When viewing multiple panes at the same time, or viewing the note on a mobile device, it drifts into a weird position, and a theme with a custom readable line length may disrupt its placement on the page.
You can still use the icons feature, but be warned: it can act a bit wonky.

I recommend just sticking to the banners.


very nice
what is your theme name ?

1 Like

The themes are Shiba Inu and Chime.

1 Like

thank you man you solved this problem with banner and please can you give me a track to learn css like you ? :grinning:

1 Like

Well, I’m really still a beginner and hadn’t touched css before December. Like I said above, I was only able to make the banners with @efemkay’s code.

If you want to get started learning css though, I’d recommend you start experimenting by tweaking existing themes’ code and looking at other people’s css. I started by messing with the Mado Miniflow theme. The result of my tweaking was an abomination, but it gave me a feel for how css works. After that, and a few hours of pasting css from Wikipedia, I’ve been able to make simple themes from scratch.

Sololearn has a free course on css that you can also view if you like. However, I think the fastest way to learn is by observing, replicating other people’s css tricks, and experimenting.

I’d also recommend reading these posts. They’re a great introduction to making css for Obsidian.

Getting comfortable with Obsidian CSS
Common Selectors for Custom CSS


I’m new with CSS too. I put this in my note:

cssclass: obsidian-banner
banner: ![image-alt|banner](books.jpg)

but nothing happens.
Can you give a frontmatter example of yours please? Thanks in advance.

You got the css class right, but the image you want to use for the banner can go anywhere on the page except the frontmatter.

cssclass: obsidian-banner
![a picture of the ocean|banner](ocean.png)

The banner image is a normal image with an extra alt (separated by an |).
You can also use the banner alt by itself:


or put the alt inside a local image wikilink embed:

![[pasted image.png|banner]]

Thanks, very kind of you.