/* 複数の背景画像を設定 */
body{
background-image:url('背景画像1.jpg'),
url('背景画像2.jpg'),
url('背景画像3.jpg');
background-repeat: no-repeat, no-repeat, no-repeat;
background-position:5% 5%,95% 95%,center center;
background-size:30%,30%,80%;
background-attachment:fixed, fixed, fixed;
}
/* 背景を薄暗くする設定 */
body::before{
background-color: rgba(0,0,0,0.6);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content:'';
}
上記CSSの例ではbody要素に背景画像を3つ指定し、画像の大きさと位置が異なるように設定しています。
::before疑似要素では背景を薄暗く表示するよう設定。
表示イメージは以下のようになります
コメントを残す