More than 3 years have passed since last update.

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

Posted at 2022-01-03

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

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を設定する

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up