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

updated 2021-12-1

元画像

基本


<!-- html -->
<div class="with-background"></div>
/* css */
.with-background {
    height: 300px;
    background-image: url(/assets/images/1920x705.png);
    background-size: 100%;
    background-position: center;
}

背景は静止させる


<!-- html -->
<div class="with-background-fixed"></div>
/* css */
.with-background-fixed {
    height: 300px;
    background: url(/assets/images/1920x705.png);
    /* 横幅に合わせる */
    background-size: 100%;
    background-position:top left;
    background-attachment: fixed;
    background-repeat: no-repeat repeat;
}