空の写真をホームページの背景に固定表示する方法

空の写真をホームページの背景に固定表示する方法です。

  • まずサンプルホームページをご覧ください。
    http://www.barefoot-resort.jp/
    ページを下にスクロールしても背景画像が動きませんね。
  • 背景画像が動くと違和感があるようなデザインの場合や、個人の嗜好で固定背景が好みな場合には良いと思います。
  • 私個人としては固定背景が好みです。
    特に空の写真の場合には上に固定されている方が見やすく思います。
  • これを実現するには、CSS(スタイルシート)を用います。
  • CSSに下記を記述してください。
    body {
    background-image: url(背景画像のurl); /*コピーして保存した画像のurl*/
    background-repeat: repeat-x;  /*横長のブラウザーで端が切れないようにx方向に繰り返し*/
    background-position: 50% 0%;  /*左%は横位置、右%は縦位置*/
    background-attachment:fixed;  */背景画像を固定/*
    background-color:#FFFFFF;  */グラデーションとなじむように白背景/*
    }
  • ブラウザーやパソコンの種類によっては正常に表示されないことがあります。
  • サンプル画像2例は下記です。
    ※コピーしてご利用ください。

 

空の写真をホームページの背景に

空の写真をホームページの背景に

 

空の写真をホームページの背景に固定表示

空の写真をホームページの背景に固定表示

 

  • こういう画像をご自身で作る方法
  1. 別投稿の空の写真をコピー
  2. 画像を上から下に向けてベクトルマスクをかける
    ※下方向に白色にします。
  3. 他にも色んな方法があります。
  • 作業の要らないように、順次「ホームページの背景に固定表示する空の写真」を順次掲載してゆきますのでご利用ください。