Headers with Style

Header Image with Background Color

2016/05/15

Template - header

Feeling Responsive allows you to use all kinds of headers. This example shows a header image with a defined background color via front matter.

It’s so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the example with a background pattern.

Front Matter Code

WARNING: To make this work the value of background-color must be inbetween quotes.

header:
    image: "header_unsplash_2-970x.jpg"
    background-color: "#fabb00"
    caption: This is a caption for the header image with link
    caption_url: https://unsplash.com/

Front Matter Code

All Header-Styles