Basics You can set the banner per page or site-wide. This page has a custom banner (see, it’s upside-down).
First it checks a pages yaml frontmatter for the header image, if none is found then it checks for a site-wide default in your config.yml, if none is found then no banner image is displayed.
The banner uses the
srcset tag to set different sized images for different screens, so we’ll need 4 sizes of our banner image:
Sizes Since we’re using Zurb’s grid, we’re going to use their breakpoints to determine sizes. The demo site is using the following widths:
- small: 640px
- medium: 1024px
- large: 1440px
- extra-large: 1920px
We also use
img src with the extra-large sized image for browsers that don’t support srcset.
Site-Wide Banner You can set a site-wide default banner image by adding the following to your _config.yml:
header: yes header_sm: path/to/banner-sm.jpg header_med: path/to/banner-med.jpg header_large: path/to/banner-large.jpg header_xl: path/to/banner-xl.jpg
Per Page Banner You can also override it per page by adding the same code to the yaml front matter of any page.