Header images with CSS

[ok-until-you-arrived]

This CSS snippet allows you to create a header image by targeting the alt selector, which defaults to the file name. It will work with any image where the name starts with ‘masthead-fade’.

.view-content {
  z-index: 0;
}

img[alt^="masthead-fade"] {
  width: 100%;
  margin: 0px auto;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 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));
  opacity: 0.4;
  z-index: -1;
}

And looks like this.

Nice if you want to add a bit of colour to your pages. It’s a bit of a hack, so your mileage may vary.

[Kuncy]

What a beautiful theme!! Can you share the CSS files ?

[Outis]

Thank you for sharing. Would also like to know about the theme you are using.

[Moonbase59]

Thanks for a real creative idea!

[den]

What a beautiful theme!
Is it available for download?

For flexibility I recommend to change

img[alt^="masthead-fade"]{...} >>> span[src$="background_fade"] img{...}

This will enable:

• to make any image (regardless the file name) to be set as background
• by just adding # and suffix [[example.jpg##background-fade]]

[den]

It will be amazing if we do not need to make the 16:9 images, but we can use any image in any ration and CSS will crop the image.

Responsively crop 4:3 image into 16:9

I tried to implement it, but I’m failing in Obsidian…

[Moonbase59]

Just a thougt: You might be able to get at the the image’s data-href property, empty its content, use a :before and declare it a background image. Thus, you could use a background-size of cover or contain.

[Alex0]

Wow please let me know when the ratio stuff is fixed!

[den]

Editor

Preview

CSS

/* --------------- */
/* Page image background */

.view-content {
  z-index: 0;
}

span[src$="background_fade"] img{
  display:block;
  width: 100%;
  height: 50%;
  max-width: 800px;
  margin: 0px auto -80px auto;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 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));
  opacity: 0.7;
  z-index: -1;
}

.markdown-preview-view img:not([width]) {
    max-width: 100% !important;
    outline: none;
}

[Fanshu]

Is it possible to support such ![](Url.jpg) link images?

[den]

Not sure… I’m not fan of this formatting in Obsidian.

[Fanshu]

I would like to ask why the text is displayed directly after I use the code segment, instead of having blank lines like you.

[Madjest]

To my experience I haven’t found a way to modify it to be able to use the ![](Url.jpg) format but I found an alternative which is this:

HTML

<span src="background_fade" class="internal-embed image-embed is-loaded">

			<img alt="Image not found." src="Put_link_here">
</span>

And for the display issue, it’s because of the margin: -50px auto 0px auto; in the css snippet, sequentially those 4 variables represent top, right, bottom, and left margins, So you just need to set the “bottom” margin to something like 0px or even just auto works. Hope that helps!