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

NetyaSun

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


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


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

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


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

1
gif 1.7kb
2
gif 1.9kb
3
gif 2.1kb
4
gif 1.7kb
5
gif 2.5kb
6
gif 1.6kb
7
gif 0.7kb
8
jpg 1.0kb
9
jpg 0.9kb
10
jpg 1.0kb
11
jpg 1.0kb
12
jpg 1.0kb
13
jpg 1.0kb
14
jpg 1.0kb
15
jpg 1.0kb
16
jpg 1.0kb
17
jpg 1.0kb
18
jpg 1.0kb
19
jpg 1.0kb
20
jpg 1.0kb
21
jpg 1.0kb
22
jpg 1.0kb
23
jpg 1.0kb
24
jpg 0.9kb
25
jpg 0.9kb
26
jpg 1.0kb
27
jpg 0.9kb
28
jpg 0.9kb
29
gif 0.4kb
30
gif 0.5kb
31
gif 0.5kb
32
gif 0.5kb
33
gif 0.5kb
34
gif 0.5kb
35
gif 0.4kb
36
gif 1.0kb
37
gif 1.0kb
38
gif 1.0kb
39
gif 1.0kb
40
gif 1.0kb
41
gif 1.1kb
42
gif 1.2kb
50
jpg 0.9kb
51
jpg 0.9kb
52
jpg 0.9kb
53
jpg 1.0kb
54
jpg 0.8kb
55
jpg 0.8kb
56
jpg 0.9kb
57
jpg 0.9kb
58
jpg 0.6kb
59
jpg 0.9kb
60
jpg 0.9kb
61
jpg 0.9kb
62
jpg 1.0kb
63
jpg 1.0kb
ノート64
gif 0.2kb
ノート65
gif 0.3kb
ノート66
gif 0.3kb
ノート67
gif 0.3kb
畳68
jpg 1.2kb
畳69
jpg 1.2kb
畳70
jpg 1.2kb
71
jpg 1.0kb
72
jpg 0.9kb
73
jpg 0.9kb
74
jpg 1.4kb
75
jpg 1.1kb
76
jpg 1.0kb
77
jpg 1.2kb
78
jpg 1.0kb
79
jpg 1.0kb
80
jpg 1.0kb
81
jpg 0.9kb
82
jpg 0.8kb
83
jpg 0.7kb
84
jpg 0.9kb
85
jpg 0.8kb
86
jpg 0.7kb
87
gif 0.9kb
88
gif 0.9kb
89
jpg 1.0kb
90
jpg 0.8kb
91
jpg 0.8kb
92
jpg 0.9kb
93
jpg 0.7kb
94
jpg 1.0kb
95
jpg 1.0kb
96
jpg 1.0kb
97
jpg 1.0kb
98
jpg 0.9kb
星100
jpg 1.3kb
星105
gif 1.0kb
雪128
gif 1.0kb
雪130
gif 1.0kb
102
jpg 1.1kb
103
jpg 0.9kb
104
jpg 0.9kb
106
jpg 0.8kb
107
gif 1.7kb
108
gif 2.0kb
109
gif 1.7kb
110
gif 1.7kb
111
gif 1.7kb
112
gif 1.6kb
113
jpg 1.6kb
114
jpg 0.9kb
115
jpg 1.0kb
116
jpg 1.3kb
117
jpg 1.1kb
118
jpg 1.0kb
119
jpg 1.3kb
120
jpg 1.1kb
121
jpg 0.8kb
122
jpg 0.9kb
123
jpg 0.8kb
紅葉124
jpg 2.2kb
桜125
jpg 1.1kb
126
jpg 1.2kb
市松模様透過131 横縞透過132 罫線透過133 升目透過134 升目透過135 升目透過136 升目透過137
透過画像 市松チェック , 縞ストライブ , 透明罫線 , 升目
background-colorの変更で背景色を指定して背景色に依存させる。

HTML,CSS 背景画像の保存・表示方法

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

  • 画像にマウスカーソルを当てる
  • 右クリック
  • 名前を付けて画像を保存
  • フォルダを選択
  • 名前を変更しても良い
  • 保存

画像の表示方法 (画像名が 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の記述間違いなどの単純ミスと考え、
再度見直したり別の画像を配置してみるのが手っ取り早い確認方法です。

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

ご利用ルール

  • 無料フリー素材。個人サイト・商用利用でもご利用可能。
    (再配布、アダルト、法律違反、自動生成などの迷惑サイトでのご利用はご遠慮ください)
  • 当サイト内画像の直リンク禁止
    画像をパソコンで保存し自分のサーバ内にアッププロードしてご利用下さい。
  • その他、当サーバーに負担が掛かならないようにお願いします。
  • 拡張子は、.gif か .jpgで、1kb程度のサイズに抑えました。
  • 画像の二次加工もご自由に。
  • 画像は、変更・差し替え・削除する場合もあります。
  • リンクフリー(迷惑サイト不可) 当サイトURLのリンクやお気に入りは、ご自由にどうぞ。
  • 最終更新: 2014年5月

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