Image by Florian Klauer

Headers With Style

Header Image With Background Color

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_fullwidth: "typewriter.jpg"
    caption: Image by Florian Klauer
    caption_url: "http://florianklauer.de/"
    background-color:  "#304558"

All Header-Styles

DESIGN
design background color header