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:
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:
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?:-)
Marc
Sorry for the noob question but what is the proper way to increase the image containers height?
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 likeheight: 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 *