【コピペできるCSS】動く背景画像の作り方

2021-12-1

meko

元画像

基本

<!-- html -->
<div class="with-background"></div>
Copy

/* css */
.with-background {
    height: 300px;
    background-image: url(/assets/1920x705.png);
    background-size: 100%;
    background-position: center;
}
Copy

背景は静止させる

<!-- html -->
<div class="with-background-fixed"></div>
Copy

/* css */
.with-background-fixed {
    height: 300px;
    background: url(/assets/1920x705.png);
    /* 横幅に合わせる */
    background-size: 100%;
    background-position:top left;
    background-attachment: fixed;
    background-repeat: no-repeat repeat;
}
Copy