初心者でも簡単作成ウェブサイト（ホームページ）　パソコン　インターネットの情報

NetyaSun

ホームページ背景画像壁紙　無料

ホームページの背景画像　壁紙　無料,フリー画像素材
HTML,CSS　　background-image:url( ); で簡単設置

背景画像を使うメリット: イメージ・デザインの統一、デザイン性の向上、オリジナリティ。
目に優しい色が使える。　文字が画像から浮き出て立体感がでる。
背景画像を使うデメリット: 読み込み速度や表示が重くなる。　背景と文章の同色部分が被り読み難くなる。
色彩やコントラストで目が疲れる場合もある。　リンク切れは背景非表示になる。

高画質で表示させるなら、解像度の高い原画や１枚物の大画像を利用しますが、
重い環境を考慮するなら背景色 "background-color:" で対応するか軽い背景画像を使います。

画像にオンマウス（onmouseover）、カーソルで背景画像が変更（要ワイド画面）

gif 1.7kb	gif 1.9kb	gif 2.1kb	gif 1.7kb	gif 2.5kb	gif 1.6kb	gif 0.7kb
jpg 1.0kb	jpg 0.9kb	jpg 1.0kb	jpg 1.0kb	jpg 1.0kb	jpg 1.0kb	jpg 1.0kb
jpg 1.0kb	jpg 1.0kb	jpg 1.0kb	jpg 1.0kb	jpg 1.0kb	jpg 1.0kb	jpg 1.0kb
jpg 1.0kb	jpg 1.0kb	jpg 0.9kb	jpg 0.9kb	jpg 1.0kb	jpg 0.9kb	jpg 0.9kb
gif 0.4kb	gif 0.5kb	gif 0.5kb	gif 0.5kb	gif 0.5kb	gif 0.5kb	gif 0.4kb
gif 1.0kb	gif 1.0kb	gif 1.0kb	gif 1.0kb	gif 1.0kb	gif 1.1kb	gif 1.2kb

jpg 0.9kb	jpg 0.9kb	jpg 0.9kb	jpg 1.0kb	jpg 0.8kb	jpg 0.8kb	jpg 0.9kb
jpg 0.9kb	jpg 0.6kb	jpg 0.9kb	jpg 0.9kb	jpg 0.9kb	jpg 1.0kb	jpg 1.0kb
gif 0.2kb	gif 0.3kb	gif 0.3kb	gif 0.3kb	jpg 1.2kb	jpg 1.2kb	jpg 1.2kb
jpg 1.0kb	jpg 0.9kb	jpg 0.9kb	jpg 1.4kb	jpg 1.1kb	jpg 1.0kb	jpg 1.2kb
jpg 1.0kb	jpg 1.0kb	jpg 1.0kb	jpg 0.9kb	jpg 0.8kb	jpg 0.7kb	jpg 0.9kb

jpg 0.8kb	jpg 0.7kb	gif 0.9kb	gif 0.9kb	jpg 1.0kb	jpg 0.8kb	jpg 0.8kb
jpg 0.9kb	jpg 0.7kb	jpg 1.0kb	jpg 1.0kb	jpg 1.0kb	jpg 1.0kb	jpg 0.9kb
jpg 1.3kb	gif 1.0kb	gif 1.0kb	gif 1.0kb	jpg 1.1kb	jpg 0.9kb	jpg 0.9kb
jpg 0.8kb	gif 1.7kb	gif 2.0kb	gif 1.7kb	gif 1.7kb	gif 1.7kb	gif 1.6kb
jpg 1.6kb	jpg 0.9kb	jpg 1.0kb	jpg 1.3kb	jpg 1.1kb	jpg 1.0kb	jpg 1.3kb
jpg 1.1kb	jpg 0.8kb	jpg 0.9kb	jpg 0.8kb	jpg 2.2kb	jpg 1.1kb	jpg 1.2kb
透過画像　市松チェック , 縞ストライブ , 透明罫線 , 升目 background-colorの変更で背景色を指定して背景色に依存させる。

画像の保存方法
目的の背景画像を右クリックして「名前を付けて画像を保存」

画像の表示方法　（画像名が b001.gif の例）
background属性での記述（<body background=" ">）は非奨励属性なので、
CSS （style属性,style要素,link要素の各方法）で記述。

<body style="background-image: url(***.gif);">

body{ background-image: url(***.gif);}    /* CSS */

url(***.gif) の( )内は、画像パスを適切に記述する事。

画像が表示されない場合背景画像の表示方法を読んで再設定。

それでも、画像が表示されない場合は、
画像の保存場所やHTML,CSSの記述間違いなどの単純ミスと考え、
再度見直したり別の画像を配置してみるのが手っ取り早い確認方法です。

注意：１: ここの画像は、96×96 の画像を背景で縦横にリピートしている。
注意：２: 背景画像の上に <div> などで背景色を被せていると
その裏の body の背景画像が隠れて表示出来ない。
（ここのbody背景が、ここの白色背景枠で隠れているから背景が両サイドしか見えないのと同様）
注意：３: 画像パスがわからない場合には、
自分のドメインURLの http:// からの絶対パスの画像URLを指定する。
注意：４: 背景画像を変更したのに変化ない場合は、リロード更新F5キー
ブラウザキャッシュが強すぎて変化しない場合には、
スーパーリロードやキャッシュ（インターネット一時ファイル）削除で再起動。
注意：５: <body style="background-image: url(***);"> ではなく
<body style="background: url(***);"> でも良いが
別のbody指定　body { background: ～ ;} なども含め優先順位も考慮する。; body { background-repeat: ;} の別途指定があれば解除する。

ご利用ルール

このページは、2014年5月発行の
「ゼロから作るホームページ作り」成美堂出版にて
フリー素材として紹介されています。