背景にどーんと画像をおく

2012-11-19 14:03:23 | ブログカスタマイズ
昔HTMLでページを作っていたころは背景に一枚画像をドーンとおくデザインは結構良くみましたが、最近では余り見かけませんね。

とりあえず、背景に画像を置きたくなったのでやり方を調べています。

CSSで、background-imageで指定してから、background-sizeプロパティの値を変えます。

プロパティの指定

/* 背景画像が常に表示される形でフィット -contain- */
background-size:contain;

/* 横100% 縦100% */
background-size:100% 100%;

/* 横100% 縦アス比を維持して拡大 -*/
background-size:100% auto;

/* 横30px 縦30px */
background-size:30px 30px;

となっているはずですが…　Gooでは　background-sizeはどうも機能していないようです。値を色々変えても変化がありません…アレ（汗）

というわけで動作確認にはなりませんでしたが…

ーーーーーーーーーーーーーーー
/* ページ全体の背景と余白 */
body {
background-image: url(http://blogimg.goo.ne.jp/user_image/2d/42/199a78d12c21794d47e96759f1791072.jpg);
background-repeat:;
background-position:top;
　background-size:;
margin:0px;
padding:0px;
background-color:#C3DBEB;
}
ーーーーーーーーーーーーーーーーー
使うのは赤字の部分です。　

画面サイズが固定されていないウェブでは、背景画像はタイル式に敷き詰めるのが
穏当です。一枚を拡大して使うのは　パソコンの液晶画面サイズに限定される横は
ともかく、縦の長さはどれくらい長くなっても良いような設計をしてあるのが
ブログなので、かなり拡大されてしまうと画像としての形式を成さない…ので
背景画像はどうしてもタイル形式に繰り返されます。

ということは、”継ぎ目が目出つ”ということです。

この影響を最小にするために、画像は

・コントラストが小さい画像を使う
・グラデーションなどをかけ境界線をぼかす
・ソフトフォーカスをかけ境界線をぼかす

などのテクをあらかじめ画像編集ソフトでかけておくことが大切ですね。

ちなみに色々な背景画像を試しましたが…








色調調整とコントラストを低下させた　上から２番目のが一番背景に適しているようでした。

同じ画像でも色々印象がいぢれるのは楽しいですが、用途を考えるとおのずと画像が限られてくるということですね。

ちなみにコレは先日西穂独標で取ってきたもの。

最新の画像［もっと見る］