⇒背景スライダー（swiper）

⇒背景MAX

⇒catore-a

background-attachment: fixed;とbackground-size: cover;を同時に指定するとスマホでは効かない現象は、公式認定のバグ

  
//スマホでは画像は中央部分
//iosで、bodyでは効かないので、疑似要素を使う。

body:before{
  content:"";
  display:block;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  min-height:100vh;
  background-color: #fff;            /* 背景色 */
  background-image: url("/image/for_back3.jpg"); /* 画像 */
  background-size: cover;               /* 全画面 */
  background-position: center center;   /* 横縦中央 */
  background-repeat: no-repeat;   /* リピートなし */
}

//これは絶対に使わないこと
background-attachment: fixed;         /* 固定 */
//公式認定のバグ
//background-attachment: fixed;とbackground-size: cover;を同時に指定するとスマホでは効かない現象

background-position: center top;   /* 横中央縦上 */

/* 縦で合わせる場合 */
  background-size:  auto 100vh;

元画像

元画像１

⇒背景を切り替える

  
   /* ▼共通装飾(兼モバイル用) */

   body {
      background-color: #486d46;
      background-image: url("forest-small.jpg"); /* 640x426 */
      background-size: cover;
      background-attachment: fixed;
      background-position: center center;
   }

   /* ▼中くらいの画面用 */
   @media (min-width: 640px) {
      body {
         background-image: url("forest-middle.jpg"); /* 1280x854 */
      }
   }

   /* ▼広い画面用 */
   @media (min-width: 1280px) {
      body {
         background-image: url("forest-large.jpg"); /* 1860x1240 */
      }
   }
   /* 縦長の場合 */
   @media screen and (orientation: portrait) {


   }

   /* 横長の場合 */
   @media screen and (orientation: landscape) {
     #toolbar {

    }

元画像

元画像１