背景画像として表示するタイプで固定

background-attachmentプロパティでfixedを使えば固定できますが、これだと、ウィンドウに対して固定されるため、background-size: cover;の指定で、ウィンドウ全体を埋めるように配置されてしまい、今回のレイアウトではちょっと都合が悪いです…:(。

なのでここでもまた、header要素の::before擬似要素を使って表示することにします。

::before擬似要素にposition: fixed;を指定して、ウィンドウに対して絶対配置します。fixedを指定すると、親要素との関連が切れるため、height: 100%;の指定が、ウィンドウの高さいっぱいになっちゃうので、50%に指定し直します。

header::before {
	position: fixed;
	height: 50%;
	︙

ライセンス表記もヘッダー画像と一緒に固定するなら、同じくposition: fixed;を指定しましょう。
ウィンドウが基準になるため、bottom: 1em;の指定だと、ウィンドウの底辺から1em上ということになっちゃうので、適宜位置を調整する必要があります。ここでは、ウィンドウの底辺から、50vh + 1em上の位置に配置するようにしました。

.caption {
	position: fixed;
	bottom: calc(50vh + 1em);
	︙

これだけだと、main要素がヘッダーの下に潜ってしまうので、position: relative;を指定します。
さらに、上に重なったときにちゃんとヘッダーを隠すように、背景色もつけておきましょう。

main {
	display: block;
	position: relative;
	background: #fff;
}

※はじめのdisplay: block;は、IE11のための指定。詳しくはこちらの記事を参照のこと。

img要素で表示するタイプを固定

まずはobject-fitプロパティを使って表示させてるタイプ。
背景画像として表示したタイプとほとんど同じく、前述の::before擬似要素にした修正を、figure要素に施します。ライセンス表記もfigure要素の中に入ってるので、一緒に固定されますねー。

header figure {
	position: fixed;
	height: 50%;
}

けれど、画像と一緒にライセンス表記も、半透明のスクリーンの下に隠れるようになっちゃいました…X(。

figure要素が、親要素との関連が切れたことで、その子要素もfigure要素の中に隔離されちゃったカンジなんです。z-indexプロパティを指定しても、figure要素の外に出られないから、半透明スクリーントーンの上にいけない状態なんですね…。
なので、header要素の::after擬似要素として作った半透明スクリーントーンは非表示にして、新たに、figure要素の::before擬似要素として作り直すことにします。

header::after {
	display: none;
}
header figure::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,.3) radial-gradient(rgba(0,0,0,.3) 25%, transparent 0) center / 5px 5px;
}

あとは前述と同じく、main要素に背景色をつけたりなんだりで、できあがり。

object-fitプロパティを使わずに表示させてるタイプも、全く同じ！