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

[Bluemoondragon07]

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.

[Abdelrhman]

very nice
what is your theme name ?

[Bluemoondragon07]

The themes are Shiba Inu and Chime.

[Abdelrhman]

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

[Bluemoondragon07]

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

[arren]

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.

[Bluemoondragon07]

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:

![banner](books.jpg)

or put the alt inside a local image wikilink embed:

![[pasted image.png|banner]]

[arren]

Thanks, very kind of you.

[weedbelly]

hey, how do you make the tasks view ? in the first image
it super cool

[Bluemoondragon07]

It was as snippet based on a CSS class in the Mado Miniflow theme. I put it on a repo here if you wanna use it. You just use the put cssclass: panel or cssclass: mado-panel in the note frontmatter.

[CheLin]

Thanks to the seniors for sharing the banner.
This works great and suits me.
Then I also made some adjustments and wanted to give back to everyone here.
Adjust as follows:

1. Use the icon on desktop and mobile phone, and the location will not be lost.
2. In untitled mode, preview can be performed normally.

[CheLin]

3. The page can be previewed normally when hovering.
   
   

[CheLin]

4. In the untitled mode of live preview, you can edit normally.
   
   

There is a follow-up, but I can’t reply now and I have to wait for a while.

[CheLin]

5. There will not be an extra blank line when previewing.
   
   

[CheLin]

6. Banner or icon can be used alone or together.
   
   
   
   
   
   
   
   

[CheLin]

Below is the modified CSS：

/* ---- the code below is modified version of Bluemoondragon07's banner image in this forum post: https://forum.obsidian.md/t/banner-images-icons-experimental-more-image-options-css-snippet/53738 ---- */
/* ----- common variants ----- */
body {
    --banner-height: 250px;
    --icon-height: 100px;
}

/* ----- icon setting ----- */
.internal-embed.image-embed[alt*="icon"] {
    display: contents;
}

.obsidian-icon img[alt*="icon"] {
    position: absolute;
    width: 80px !important;
    object-fit: cover;
    border-radius: 100%;
    z-index: 1;
}

/* ---- icon position setting --- */
.obsidian-icon img[alt*="icon"] {
    top: 20px;
}

.obsidian-icon.markdown-preview-view:has(img[alt*="icon"]) .mod-header {
    position: relative;
    padding-top: calc(var(--icon-height) - 20px);
    z-index: 1;
}

.obsidian-icon:has(img[alt*="icon"]) .cm-sizer {
    position: static;
    padding-top: calc(var(--icon-height) - 20px);
    z-index: 1;
}


/* ----- banner setting ----- */
/* make the div (in LP) containing the image doesn't control the css box-sizing */
.internal-embed.image-embed[alt*="banner"] {
    display: contents;
}

.obsidian-banner img[alt*="banner"] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--banner-height);
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    object-fit: cover;
    object-position: 50% 50%;
    overflow: hidden;
    user-select: none;
    border-radius: 0px;
}

/* ---- banner position setting --- */
.obsidian-banner.markdown-preview-view:has(img[alt*="banner"]) .mod-header {
    position: relative;
    padding-top: calc(var(--banner-height) - 40px);
    z-index: 1;
}

.obsidian-banner:has(img[alt*="banner"]) .cm-sizer {
    position: static;
    padding-top: calc(var(--banner-height) - 40px);
    z-index: 1;
}

.obsidian-icon:has(img[alt*="banner"]) img[alt*="icon"] {
    top: calc(var(--banner-height) - 100px);
}

/* ---- banner gradient --- */
.obsidian-banner img[alt*="banner"] {
    -webkit-mask-image: -webkit-gradient(linear, 50% 60%, 50% 100%, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

/* ---- banner position setting optional --- */
.obsidian-banner img[alt*="banner"][alt*="0%"] {
    object-position: 50% 0%;
}

.obsidian-banner img[alt*="banner"][alt*="5%"] {
    object-position: 50% 5%;
}

.obsidian-banner img[alt*="banner"][alt*="10%"] {
    object-position: 50% 10%;
}

.obsidian-banner img[alt*="banner"][alt*="15%"] {
    object-position: 50% 15%;
}

.obsidian-banner img[alt*="banner"][alt*="20%"] {
    object-position: 50% 20%;
}

.obsidian-banner img[alt*="banner"][alt*="25%"] {
    object-position: 50% 25%;
}

.obsidian-banner img[alt*="banner"][alt*="30%"] {
    object-position: 50% 30%;
}

.obsidian-banner img[alt*="banner"][alt*="35%"] {
    object-position: 50% 35%;
}

.obsidian-banner img[alt*="banner"][alt*="40%"] {
    object-position: 50% 40%;
}

.obsidian-banner img[alt*="banner"][alt*="45%"] {
    object-position: 50% 45%;
}

.obsidian-banner img[alt*="banner"][alt*="50%"] {
    object-position: 50% 50%;
}

.obsidian-banner img[alt*="banner"][alt*="55%"] {
    object-position: 50% 55%;
}

.obsidian-banner img[alt*="banner"][alt*="60%"] {
    object-position: 50% 60%;
}

.obsidian-banner img[alt*="banner"][alt*="65%"] {
    object-position: 50% 65%;
}

.obsidian-banner img[alt*="banner"][alt*="70%"] {
    object-position: 50% 70%;
}

.obsidian-banner img[alt*="banner"][alt*="75%"] {
    object-position: 50% 75%;
}

.obsidian-banner img[alt*="banner"][alt*="80%"] {
    object-position: 50% 80%;
}

.obsidian-banner img[alt*="banner"][alt*="85%"] {
    object-position: 50% 85%;
}

.obsidian-banner img[alt*="banner"][alt*="90%"] {
    object-position: 50% 90%;
}

.obsidian-banner img[alt*="banner"][alt*="95%"] {
    object-position: 50% 95%;
}

.obsidian-banner img[alt*="banner"][alt*="100%"] {
    object-position: 50% 100%;
}

/* ---- hide preview space line --- */
.obsidian-banner.markdown-preview-view span[alt*="banner"]+br {
  display: none;
}

.obsidian-banner.markdown-preview-view span[alt*="icon"]+br {
  display: none;
}

/* --- profile image --- */
img[alt*="circle"],
img[alt*="profile"],
img[alt*="round"] {
    display: block;
    border-radius: 100%;
    aspect-ratio: 1/1;
    object-fit: cover;
    width: 60%;
    position: 50% 50%;
    margin-right: auto;
    margin-left: auto;
}

/* --- float images --- */
.markdown-rendered img[alt*="right"] {
    display: flexbox;
    float: right;
    clear: right;
    max-width: 40%;
    margin-left: 15px;
}

.markdown-rendered img[alt*="left"] {
    display: flexbox;
    float: left;
    clear: left;
    max-width: 40%;
    margin-right: 40px;
}

[Bluemoondragon07]

*~ ~*

Wow, I’m amazed! This so much better than the original one. Thank you for sharing your skill!

I remember that I was having a lot of difficulty with the icon position, and you fixed it perfectly! Your version is also a lot cleaner and has better options. Like– wow!

[cReisz]

I love this snippet, that was exactly what I was looking for! Could you make a version of this snippet in which the banner goes above the note’s title? So that an option to increase the banner’s height gets possible.

I tried to do it, but I’m terrible with CSS lol