【プログラミング】HTML CSS 背景画像を固定する方法【ソース付き】

ランディングページなどで、画像が消えたり表示されたりするのは、どうしてだろう？

この記事はこんな疑問にお答えします。

本記事の内容
・ランディングページでの画像が消えたり表示されたりする
・背景画像を固定する
・実際のソース

■ランディングページでの画像が消えたり表示されたりする

「ランディングページを見ていると、表示されている画像が消えたり、また現れたりするよね」
「あれはどうやっているんだろう」

縦に長いランディングページを見ていると、最初に表示されていた画像が、下にスクロールすると消えてなくなるのに、さらに下にスクロールするとまた現れたりしますよね。

僕が初めて見た時、「いや、これどうやっているんだろう？」と不思議に思いました。

とても高度なスキルがないとできないんじゃないかな・・・。

実際にはそれほどスゴイことではないのですが、方法がわからなかった僕は、「こんなことできないよ」と素直に思ったものです。

HTML CSS を学んだ人からすれば、「そんなの簡単じゃん」と言うと思いますが、スキルが低いととても難しいことに思えてしまうものです。

では、その方法とは・・・

「背景画像を固定する」です。

「えっ？！そんな簡単な方法なの？」

簡単な方法なのですが、その背景画像に写真などを使うと、途端にスゴイことのように見えるから驚きです。

「そう思うのはお前だけや」と言われてしまいそうですが・・・。

■背景画像を固定する

では、実際の方法です。

HTML でbody要素に背景を設定します。

それを画面横いっぱいに表示します。

その際、body のmargin が自動で取られるので、margin の値を 0 にしておきます。

そしてbody の中に、各要素を入れていき、その各要素にも背景を指定すると、各要素が表示されている部分は、body の背景より上に表示されるので、body の背景は消えているように見えます。

その後、背景を指定していない要素が表示されると、body の背景がまた表示されるので、再び現れてきたように見えるのです。

簡単ですが、body の背景にオシャレな写真などを背景として設定すると、デザイン性が高まって見えるので不思議です。

■実際のソース

わかりやすく表示されるものをコーディングしてみました。

以下のようになります。

  
    
    
    
  
  
    

      

        ボックス１
      
    
    

      

        ボックス２
      
    
    

      

        ボックス３
      
    
    

      

        ボックス４
      
    
  

body {
  background-color:skyblue;
  background-size:cover;
  margin:0;
}

#box1 {
  background-size:cover;
  width:100%;
}
#box2 {
  background-color:green;
  background-size:cover;
  margin: 0;
  padding:0;
  width:100%;
}

#box3 {
  width:100%;
  height:700px;
  margin:0;
  background-color:pink;
}

参考にしてみてください。