Lightning ヘッダーの背景を透過

以前は以下で対応できたが、2022年7月現在、これだけでは背景が白くなるだけだった。

.site-header {
background:none;
}

実際には透過できているようだが、ファーストビューのスライダー画像が上まで来ていないので、ただ白くなっているだけに見える。

そこで、下記のようにしたところ、うまくヘッダーの背景が透過できた。

①ヘッダー背景を透過

.site-header {
	background: none !important;
}

②画像の位置を上に上げる

.swiper-container {
	top:-80px;
}

※このままスマホで表示させると崩れてしまうので、最終的に以下のようにクエリで対処

@media(min-width:768px){
	.site-header {
		background: none !important;
	}
	.swiper-container {
		top:-80px;
	}
}