LoginSignup
0
1

More than 3 years have passed since last update.

【CSS】背景画像を複数枚重ねてレスポンシブに対応させる

Last updated at Posted at 2019-12-30

Webページの背景画像で、一部の画像だけ形を崩さずにディスプレイサイズに対応させる方法です。

やりたかったこと

2.png
最初はこのような1枚画像を用意して、ブラウザサイズに合わせて画像を変えようとしました。
が、ディスプレイサイズに合わせて縮小させると波線形状部分の形が崩れるし、画像固定にしてしまうと手前の波線画像の一部しか見えず型崩れ(あるいは画面の8割を締める)・・・など問題が出て来たので、手前の波線形状の画像だけ、常に形を崩さず最下部に表示できるにしました。

1.png3.png

ディスプレイの横幅が変わっても、波線形状だけは形を崩さず、画面下部にいるようにします。

やり方

一番奥の背景画像(desktop1.jpg)、手前の波線画像(cover1.png)をそれぞれに用意。

    body{
    background: url(./img/cover1.png),url(./img/desktop1.jpg);
    background-repeat: no-repeat,no-repeat;
    background-position: bottom,top;
    background-size: contain,cover;
    background-attachment: fixed,fixed;
    }

background-sizeを背景画像はcoverにし、隙間が生まれないように。
波線画像はcontainにすることで、常に画像の全体が見えるようにしました。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1