![eyecatch](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBmHpCGSyS_2ik8stMi3NN956lfXNNSaHAQlr-t0OCLMILQRCJ8mAtatepKAL086YEUj93E4_ZJ1wGqmo22w1kj1op_0RR02ROGcS2lKf7NiDWHZBSGy44P8YoSSREzGnSsXWvIhtwiXoJVIMBlHIB5aItaOIj16wAdFry_x-nEx16HtGEMJrZRZdy/s1600-rw/css.png)
LPなどを作る時に、背景画像をスクロール固定すると、単純なホームページから少しギミックの付いた面白い効果が出ることがあります。
そんな時に、悩ましいのが、画像サイズとアスペクト比(縦横の画像サイズ)と、配置ポジションです。
とあるWebサイトを作っている時に、ちょっとだけ思い悩んだので、備忘録しておきます。
デモ
今回のブログの背景に、スクロール固定で画面いっぱいの画像を配置してみました。
%selector{
background-image: url(イメージのpath);
background-size:cover;
background-repeat:no-repeat;
background-attachment: fixed;
}
0 件のコメント:
コメントを投稿