hacks-guide-minimal-mistake.../docs/_posts/2012-03-15-layout-header-overlay-image.md

55 lines
1.5 KiB
Markdown
Raw Normal View History

2016-09-22 04:13:25 +02:00
---
title: "Layout: Header Image Overlay"
header:
overlay_image: /assets/images/unsplash-image-1.jpg
2016-09-22 04:13:25 +02:00
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
actions:
- label: "Learn more"
url: "https://unsplash.com"
2016-09-22 04:13:25 +02:00
categories:
- Layout
- Uncategorized
tags:
- edge case
- image
- layout
last_modified_at: 2018-03-20T16:00:52-04:00
2016-09-22 04:13:25 +02:00
---
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]({{ "/assets/images/mm-header-overlay-black-filter.jpg" | relative_url }})
2016-09-22 04:13:25 +02:00
```yaml
excerpt: "This post should [...]"
header:
overlay_image: /assets/images/unsplash-image-1.jpg
2016-09-22 04:13:25 +02:00
overlay_filter: 0.5 # same as adding an opacity of 0.5 to a black background
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
actions:
- label: "More Info"
url: "https://unsplash.com"
2016-09-22 04:13:25 +02:00
```
Or if you want to do more fancy things, go full rgba:
![transparent red overlay]({{ "/assets/images/mm-header-overlay-red-filter.jpg" | relative_url }})
2016-09-22 04:13:25 +02:00
```yaml
excerpt: "This post should [...]"
header:
overlay_image: /assets/images/unsplash-image-1.jpg
2016-09-22 04:13:25 +02:00
overlay_filter: rgba(255, 0, 0, 0.5)
caption: "Photo credit: [**Unsplash**](https://unsplash.com)"
actions:
- label: "More Info"
url: "https://unsplash.com"
2016-09-22 04:13:25 +02:00
```