dennogumi.org-archive/_posts/design/2014-10-08-header-image-pattern.md

layout	title	subheadline	teaser	categories	tags	header
page	Header Image With Pattern	Headers With Style	Feeling Responsive allows you to use all kinds of headers. This example shows a header image in front of a pattern.	design	design pattern header	image pattern caption caption_url header_unsplash_2-970x.jpg pattern_concrete.jpg This is a caption for the header image with link https://unsplash.com/

It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}/design/header-image-color/).

Front Matter Code

header:
    image:  "header_unsplash_2-970x.jpg"
    pattern:  "pattern_concrete.jpg"
    caption: This is a caption for the header image with link
    caption_url: https://unsplash.com/

All Header-Styles

{: .t60 }

{% include list-posts.html tag='header' %}