body背景画像の設定方法 - 初心者の簡単WordPressでホームページ作成方法

body背景画像の設定方法

ホームページのデザインによっては、body背景画像を使うことがあります。

  • 「body背景画像」とは、ブラウザーの幅いっぱいに表示する画像のことです。
    例えば、下記のような空の写真を背景画像に使うことがあります。
    body-haikei
    他には、連続した模様を使うこともあります。
  • このbody背景画像設定方法は、CSSファイルに下記を記述します。
  • background-repeat: no-repeat;
    大きな画像の場合には、no-repeatとします。
    その際には画像の幅は2,000px位にしないと端が見えてしまいます。
    その時に、あまり大きな画像だと読込みに時間がかかってしまい何かと不利になるので、画像の最適化をしておきましょう。
    画像の最適化ツール→http://optimizilla.com/ja/
    ※「画像の最適化」とは、見栄えを損なわない範囲で画像データを軽くすることです。
    また、模様を繰り返しするような画像の場合は、小さな画像を繰り返しすれば良いですが、その時はrepeatにします。
    横だけ繰り返ししたい場合はrepeat-xで、縦だけ繰り返ししたい場合はrepeat-yとします。
  • background-position: top center;
    これは背景画像の位置を指定しています。
    最上部をtopで、常に中心にcenterで記述しています。
  • background-attachment:fixed;
    背景画像がスクロールの際に一緒に移動すると、見づらかったり、目がちかちかすることがありますので、スクロールの際に背景画像は動かないようにしています。
  • 空の写真が欲しいときには、無料の写真配布サイトからもらっても良いと思います。
    空の写真WEB用ホームページ用無料


「 body背景画像の設定方法」のページ