CSS3でヘッダー固定しつつ斜めに傾けた背景をつける方法

###こんなコードを書いて、引っかかりませんか？

```qiita.html
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<link href="qiita.css" rel="stylesheet" type="text/css">
</head>

<body>
	<header>
ああああああ
	</header>
	<div class="content">
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
	</div>
</body>
</html>
```

```qiita.css
/* ヘッダー */
/* https://qiita.com/7note/items/6bcadabe1667919bc26c */

html {
	background: url(qiita.svg);
	transform: rotate(-18deg);
	background-repeat: repeat;
}

body {
	transform: rotate(18deg);
}

header {
    width: 100%; /* 幅いっぱいを指定 */
    height: 50px; /* 高さを50pxに指定 */
    background: #CCC; /* 背景色にグレーを指定 */
    padding: 20px 50px; /* ヘッダーに上下左右それぞれ余白を指定 */
    box-sizing: border-box; /* padding分を含んで幅を100%にするため */
    position: fixed; /* ウィンドウを基準に画面に固定 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    display: flex; /* 中の要素を横並びにする */
    align-items: center; /* 中の要素を上下中央に並べる */
}
```

このコードは正しく見えるようですが
ブラウザの実装上バグります。

###単刀直入にこのコードが良いです。
```qiita.html
<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<link href="qiita.css" rel="stylesheet" type="text/css">
</head>

<body>
	<div class="background"></div>
	<header>
ああああああ
	</header>
	<div class="content">
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
こんてんと<br>こんてんと<br>こんてんと<br>こんてんと<br>
	</div>
</body>
</html>
```

```qiita.css
/* ヘッダー */
/* https://qiita.com/7note/items/6bcadabe1667919bc26c */

/* 背景要素 <div class="background"></div> */
.background {
	background-position: 0 0;
	z-index: -3;					/* 背景であるため最背面 */
	background-image: url(qiita.svg);	/* 平行な画像 */
	background-repeat: repeat;
	position: fixed;				/* fixedでないと背景がバグる */
	top:-2000px;left:-2000px;			/* この値を指定しないと傾けているためバグる */
	width: 8000px;					/* オーバーに用意しておく */
	height: 4000px;
	transform: rotate(-18deg);			/* 背景を傾ける */

}

header {
    width: 100%; /* 幅いっぱいを指定 */
    height: 50px; /* 高さを50pxに指定 */
    background: #CCC; /* 背景色にグレーを指定 */
    padding: 20px 50px; /* ヘッダーに上下左右それぞれ余白を指定 */
    box-sizing: border-box; /* padding分を含んで幅を100%にするため */
    position: fixed; /* ウィンドウを基準に画面に固定 */
    top: 0; /* 上下の固定位置を上から0pxにする */
    left: 0; /* 左右の固定位置を左から0pxにする */
    display: flex; /* 中の要素を横並びにする */
    align-items: center; /* 中の要素を上下中央に並べる */
}
```

###これはどうやってバグ回避しているのですか？
* body内にbackground（仮称）の空要素を作る
* background要素内で背景を設定し、傾ける
* 傾けるだけで、もとに戻す必要がない
* position: fixed; で背景を設定する。それゆえ背景は固定されます。
* その他、背景が傾いてループすることで、異常に大きなtop、left、width、heightを設定する
* 
*