背景画像を対角線上に配置（背景画像を複数 読み込みたい）
背景画像に、対角線上に画像を読み込み、かつ、それとは別に1枚もの背景を表示したい、という質問。
背景を複数読み込んで、位置を指定したら良いかと。
出来上がりとかデザインとか内容とかは置いといて、サンプル作ってみたけど、こんな感じ。
⇒ 背景複数読み込んだサイト
今回、HTMLはこんな感じ。モバイル版では消せるように、中身は空で作成。
<div class="background-image"></div>CSSはこんな感じ。
１つの div に背景を複数個読むときは、「,（カンマ）」で区切ります。
先頭のものが一番上に来ます。この例では「03.jpg」が背景にくる。なので「background-size : cover ;」で「background-position : enter top ;」にしているけど、この辺りは好みで。
/* PC時の背景画像 */
.background-image {
position: fixed; /* 固定配置 */
top: 0; /* 上から */
left: 0; /* 左から */
width: 100%; /* 横幅 */
height: 100%; /* 高さ */
/* 背景画像を複数指定 先頭のものが一番上 */
background-image:url(../img/01.png), url(../img/02.png), url(../img/03.jpg);
background-repeat: no-repeat;
background-size: 25%, 25%, cover;
background-position: left top, right bottom, center top;
background-attachment: fixed; /* 固定 */
z-index: -1; /* コンテンツより後ろに配置 */
}で、モバイルでは非表示にしてます。
/* スマホ用 */
@media (max-width: 767px) {
/* 背景画像 */
.background-image {
display: none; /* 非表示 */
}
}参考に、データ、ダウンロードできるようにしておいたよ。
