This post should display a header with an overlay image, if the theme supports it.

Non-square images can provide some unique styling issues.

This post tests overlay header images.

Overlay filter

You can use it by specifying the opacity (between 0 and 1) of a black overlay like so:

transparent black overlay

excerpt: "This post should [...]"
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  cta_label: "More Info"
  cta_url: "https://unsplash.com"

Or if you want to do more fancy things, go full rgba:

transparent red overlay

excerpt: "This post should [...]"
header:
  overlay_image: /assets/images/unsplash-image-1.jpg
  overlay_filter: rgba(255, 0, 0, 0.5)
  caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
  cta_label: "More Info"
  cta_url: "https://unsplash.com"

Comments

Tobias Nordahl Kristensen

Have you think about adding an “height”-limit feature to the tos, allowing users to use very heigh images, and not struggling with custom CSS and classes?:-)

Michael Rose

@Marc - you can set a height via CSS on .page__hero--overlay. It currently stretches to fit the text content inside of it, but if you want to make it taller just add something like height: 500px;.

This styling is in _sass/_page.scss.

For further context check issue #542 on GitHub… probably a better place to ask/leave questions than the comments here.

Michael Rose

@Tobias - No, I have not thought about that. In general I’m not a fan of setting max-heights or widths as they fall apart in a responsive world. What might be 500px high on desktop could be smaller or larger on mobile (and everywhere in between).

JavaScript could probably be used to determine some of that, but in this case I don’t really see the benefit by adding more complexity.

Leave a comment

Your email address will not be published. Required fields are marked *

Loading...