背景画像にsvgを使用して、幅いっぱいに表示させようとしたら破綻した。
あるいは言う事をきかない。
「Chromeだと背景サイズ指定がうまく動かねぇよ!」
参考:background-size:100% 100%; doesn’t work properly in Chrome
https://stackoverflow.com/questions/9334095/background-size100-100-doesnt-work-properly-in-chrome
という記事は発見できたがfirefoxでも破綻する報告は見つけられなかった
検証の結果、svgがもつ「アスペクト比を保つプロパティ」を指定されていない場合の動作がブラウザによって違う事が判明。
背景画像にsvgを使用して、かつ、アスペクト比を無視したい場合などには注意が必要。
解決策:png画像に変換する。svgに「preserveAspectRatio=”none”」を追記する
例:svgファイルをテキストエディタで開いてプロパティを追加する
<svg
width="940px"
height="34.271px"
viewBox="0 0 940 34.271"
preserveAspectRatio="none"
>
<path fill="#262626" d="M470,3.53c174.86,0,336.921,11.373,470,30.741V0H0v34.271C133.079,14.903,295.14,3.53,470,3.53z"/>
</svg>