Define custom local background image in a note

[STENZER]

What I’m trying to do

For some notes I would like to have a locally stored background image that covers the whole frame width. Obviously text will be written over the image but text is centered with the character limit and would prefer using the whole frame. Also I appreciate keeping my banner images, so there needs to be an offset from top in px like 250px or whatever is useful. I have no css skills and after try and nothing but error, I ask for your help.
Would be nice to keep it simple like my banners where I name the css in frontmatter and reference the banner like this in the note text ![[ANiceBanner##bannerimg]]

Things I have tried

Found this post here: Custom background image on obsidian
Works well but that will show a random image for every note. I tried to alter this and use a css-variable and had no success.

bgimg.css:
`
.markdown-preview-view::after {
content: “”;
position: absolute;
background-image: var(–bg-image);
background-repeat: no-repeat;
background-size: cover;
filter: blur(4px) brightness(50%) saturate(50%);
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
}

/* Apply the CSS class only when specified in front matter */
[data-css-classes~=“bgimg”] .markdown-preview-view::after {
display: block;
}
`

But I couldn’t manage to get this working. This is my note how I wish to use it, keep in mind I would prefer to also have a banner in some cases.

`

cssclasses:

• bgimg

---

![[bgImageLink##bgimg]]

Background Image Test

Lorem ipsum dolor sit amet…
![[anotherImage]]
`

[STENZER]

Sometimes one gets stuck because the approach was wrong from the beginning. Found a solution that works for me. I use MinerBanner for my banners and simply extended this css with what I needed. Basically it was all laid out already and I only needed to copy and alter some things.

File is attached. With that css you can use your banner images as always:

---

cssclasses: bannerimg

[[BannerImage##bannerimg]]

And now for the background simply add:
[[BackgroundImage##bgimgbanner]]

This will place the background with an offset from top according to the banner’s height.

In case you don’t have a banner on your page and just want a background, the offset will be zero when you write your note like this:

cssclasses: bannerimg

[[BackgroundImage##bgimg]]

Here is my solution, feel free to comment and improve it. All my changes are marked and in the first 100 lines of code.
MinerBanner.css (14.2 KB)