What needs to be fixed

Change SVG image and CSS styles.

Why this should be fixed

To use the cassiopeia template in production, it is not possible to change the background color of the site. Since when you change the background to a different color from white, you can immediately see the SVG error of the image. Since SVG has a white background it is immediately visible. The problem is that you can't do fixed positioning with scrolling under the menu. Since the SVG background is white, scrolling under the fixed menu positioning shows SVG fill problems. When scrolling a page, the page text is hidden under a white straight SVG wave instead of hiding under a blue wave.
2. It is not possible to stretch the site to a width of 4000 px or more, the SVG wave becomes very large and covers the entire site header. But this should not be the case, the site should simply be positioned in the middle, even at a very wide resolution.without distortion.

How would you fix it

<div class="header-shape-bottom" style="bottom:auto;top: 100%;">
	<canvas width="736" height="15" style="position: absolute;"></canvas>
	<svg preserveAspectRatio="none" viewBox="0 0 738 16" stroke="black" stroke-width="0" xmlns="http://www.w3.org/2000/svg" style="position: static;max-height: 30px;">
	<linearGradient id="linear-gradient" x1="100%" y2="-300%" y1="200%" x2="110%">
		<stop zstop-color="#112856" offset="00%" xstop-color="#434178"></stop>
		<stop stop-color="#434178" offset="100%"></stop>
	</linearGradient>
	<path d="M0,0H738V0s-75,12-214,12-284-26-524,0V0" fill="url(#linear-gradient)"></path>
	</svg>
</div>

And add css style .site-grid .container-header{margrin-bottom: 40px;}
Of course, you need to transfer the styles specified in the tags to CSS. In General, the SVG problem is solved here.
Or move the SVG to a separate file. or fix the SVG in the index.php, but can't leave it as before.

If you replace the template code in the browser with this code. 1. Make a site header with fixed positioning and scroll the site with the mouse, there will be no problems. 2. if you change the site background, the SVG image will also remain blue. 3.Having expanded the site to 4000 pixels or more, SVG will not distort and climb on the menu title, will not climb on breadcrumbs, will not climb on the title of the article.