Can you set a different header background for each route with Express?

Question

At the moment, I have the following (in Pug):

block content
  header
    .header-content
      .header-content-inner
        h1#homeHeading= title
        hr
        p
          | This is just a proof of concept
        a.btn.btn-primary.btn-xl.page-scroll(href='#about') Find Out More

This has a specific background image (Stylus):

header
  position relative
  width 100%
  min-height auto
  -webkit-background-size cover
  -moz-background-size cover
  background-size cover
  -o-background-size cover
  background-position center
  background-image url('/images/header.jpg')
  text-align center
  color $bg-white

For other routes, I have the former block of code, but I'm wondering if it's at all possible to have a different background image for each route?

For example,

index would have '/images/header.jpg'
route1 would have '/images/header-1.jpg'
route2 would have '/images/header-2.jpg'
... and so on ...

Thanks

Answer 1

Just add another class to your header in each route's template. e.g:

block content
  header.header-1
    .header-content
      .header-content-inner

… and set the background image with some new styles in your stylesheet:

.header-1    
  background-image url('/images/header-1.jpg')
.header-2  
  background-image url('/images/header-2.jpg')

Answer 2

Send the page/route name in as a variable, then specify that as part of the class:

header(class="header_" + pg)

Then you define the background image style for header_home, header_about etc.

Check the variable syntax for the version of pug you are using since it has changed recently.

Answer 3

Have you tried using append/prepend blocks in pug https://pugjs.org/language/inheritance.html#block-append-prepend

//- layout.pug
html
    head
    block head
      script(src='/vendor/jquery.js')
      script(src='/vendor/caustic.js')
  body
    block content


//- page.pug
extends layout

// it gets head content from both layout and this head as well
append head
  script(src='/vendor/three.js')
  script(src='/game.js')