MB-Support

パソコン初心者のサポートページ

ホームページの背景に画像を使う方法 background="画像の指定"

 Body に指定するオーソドックスな方法です。全てのページで背景画像を適用する場合、外部 CSS を使った方が管理が容易ですが、単発のページなどでは気軽に利用できるので重宝します。



<body>に画像を指定する background="画像の指定"

<body background="画像のアドレス">

HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body background="画像のアドレス">
<h1>シャーロックホームズ</h1> </body> </html>

ブラウザ


  ←  壁紙の画像データです。

body タグ内で background="画像のアドレス" で指定すると、画面一面に表示されます。 壁紙画像は google で「ホームページ 素材」を入力して検索すると、無料で使用が許可されたものが手に入ります。

この方法は BODY タグ内に背景画像をしていするオーソドックスな方法ですが、複数のページで背景画像を統一する場合は、後から簡単に変更できるスタイルシートを利用した方が良いでしょう。 スタイルシートを利用した場合は、縦横一列、指定位置に一回だけ表示など背景画像の繰り返し処理を制御できます。

スタイルシートで背景画像を指定する方法 background-image



グラデーションの背景画像を WEB上で制作できるサイト Background Image Maker

ホームページの背景画像や、チャプターに使う背景画像を WEB 上で制作できるサイトを見つけました。ページをリロードする事無く、メニューで指定した画像をプレビューできるので便利です。Windows に付属するペイントではグラデーションは作成できないので、何かと重宝するでしょう。

グラデーションの背景画像を WEB上で制作できるサイト Background Image Maker



Diogenes Club in MB-Support

ページの背景に写真を利用するのも一つの手ですが、ファイルサイズが大きくなりがちなので注意が必要です。 繰り返し処理を実行してもしなくても、閲覧者の 液晶ディスプレイ や解像度の設定によりサイズを想定するが難しく、デザインする貴方次第で上手く利用したり、閲覧し難くもなります。 ページの内容を掲載する部分に、透過のパーセントを指定するのもカッコイイと思います。

Diogenes Club in MB-Support

Firefox & IE 両対応 ビジュアル オブジェクトを透明にする Opacity




戻る 一覧表示 次へ


BTOパソコン・ゲームPC・自作パソコンなら【TSUKUMO】 - 自作PCに必要なパーツ、豊富な品揃え

Copyright © 2013 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人サイト閲覧方法プライバシーポリシー著作権/免責事項