torinaブログ

DjangoとBootstrap4で作成したブログ
Python, Django, Kivy, Bootstrap, Apache等のメモです
ソースコード

CSS、背景画像を固定する

HTMLとCSSとJavaScript CSS お洒落
約319日前 2016年4月14日8:27
デモページ
http://torina.top/media/html/test_Ol1EvAB.html

背景画像を固定します。

ソースはこうなりました。
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>簡易パララックス</title>
 
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      body {

        background-position: center center;
        background-size: cover;
      }
      @media screen and (min-width: 768px) {
        body {
          background-attachment: fixed;
        }
      }
 
      header {
        height: 500px;
      }
 
      #about {
        height: 500px;
      }
 
      #info {
        height: 500px;
      }
 
    </style>
  </head>
  <body>
    <header>
      <div class="container">
        <h1>ヘッダー</h1>
      </div>
    </header>
 
 
    <section id="about">
      <div class="container">
        <h1>アバウト</h1>
      </div> 
    </section>
 
 
    <section id="info">
      <div class="container">
        <h1>インフォ</h1>
      </div> 
    </section>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>


ポイントは、background-size: cover;とbackground-attachment: fixed;です。
この2つをつければ大体上手くいきます。
@media screen and (min-width: 768px)をつけていますが、
スマホでは、background-attachment: fixed;が対応していないことが多く、
タブレット以上の場合のみbackground-attachment: fixed;を付けています。スマホでは普通の背景画像としてしか見れない状態ですが、やむをえません。
      @media screen and (min-width: 768px) {
        body {
          background-attachment: fixed;
        }
      }



色々遊べるので、試してみるとよいでしょう。
デモ2
http://torina.top/media/html/test_eXM7KMC.html


参考
http://blog.phiyard.net/entry/2015/01/13/005920
http://glow-factory.com/blog_web/css/css-parallax/