【CSS】background-positionプロパティにマイナスの値を指定してみます

　どうも！LSSです！！

以前に、やってみたかったけどうまくいかなかった事があります。

little-strange.hatenablog.com

これを使いこなせたら、例えば背景画像のスクロールアニメーションができるなー、とか、以前に作ったとあるゲームの表現性が凄く上がるなー、とか思っていたのですが…。

実はもっと簡単な方法で出来そうな気がしてきました！

まず、画像を用意します
background-image:url～で指定するとこうなります
background-positionプロパティにマイナス値指定
では、background-positionの値を変更するアニメーションを作ってみます！
あとがき

まず、画像を用意します

f:id:little_strange:20200811233549j:plain

↑以前、散歩記事に使用した画像ですｗ

で、これを、幅300px・高さ400pxにサイズ指定したdiv要素に
background-image:url('画像ファイルのURL');
として当ててみます。

background-image:url～で指定するとこうなります

コード（分かりやすく改行を入れていますが、改行しなくても大丈夫です）

background-positionプロパティにマイナス値指定

background-position: -400px;

という指定を付けたしてみます。

…実にあっさりと、切り取り位置を指定した背景画像表示指定ができましたね^^

なお、「画像をずらした結果、画像の端をまたいだらどうなるか？」は、

こうなりますね。

既定値で、「background-imageは繰り返し」する事になっているので、見切れた部分は次の繰り返し画像が来る事になります。

もし、繰り返しさせたくない場合は、

background-repeat:no-repeat;

をつけて、

このようになります。

なお、要素のサイズ自体は変わっていません。

例えばborderをつけると、それが確認できます。

では、background-positionの値を変更するアニメーションを作ってみます！

<style></style>
<div style="
width: 300px; height: 400px;
background-image: url('画像ファイルのURL');
background-repeat: no-repeat;
border: 1px solid black;
animation: bgscr 6s linear 0s infinite alternate;
"> </div>