最近よく、凝ったデザインの背景を使われているサイトが多くなってきましたね。。

単色のべた塗りの背景とかに、うっすらとパターンを加えるだけでも、サイトの印象はかなり洗練された感じに変わります。

とはいっても、複雑なパターンを作るのはなかなかむずかしいもので・・・

っちゅうわけで、本日はおしゃれな背景画像を配布されているサイトをご紹介。

1. Kaliber10000
おしゃれな背景画像がどんどんアップされております。。

2. SQUIDFINGERS
こちらも150種類を超える背景画像をダウンロードできます。

3. PixelDecor
ポップな背景画像がいっぱい。

4. TILE MACHINE Gallery
100000を超える背景画像、数はおおいけど・・・

5. bgMaker’s gallery
背景を作れるジェネレーターツールのギャラリーです。自分で作ることもできます。

6. Background Image Maker
こちらも、背景画像を作れるジェネレーターツール。

7. Cornoncob! – Perfect Pixel Patterns!
Photoshopを使って、背景画像を作るチュートリアル。

背景画像を変えて、サイトの印象を変えてみてはいかがでしょうか？

CSSを使うようになって、画像はCSSのbackground-imageで画像を表示することが多くなりました。

例えば、ブログのヘッダー部分で表示しているバックグラウンド画像をランダムに表示できたら、
ブログ訪問者がアクセスするたびに画像を切り替えることができますよねぇ。。。

何度もアクセスしてくれるブログ訪問者さんにはブログの画像をコロコロと変えられるので、ブログ訪問者さんを飽きさせることもなくて便利やなぁ～。。。

なぁ～んて思ってたら、やっぱりございました。

っちゅうわけで、今日は↑のようにCSSとphpでバックグラウンド画像をランダムに表示する方法をご紹介じゃ。

1. ここから、rotator.zipを保存してくださいな。

2. 保存したrotator.zipファイルを解凍したら、「rotator」っちゅうフォルダの中に「rotator.php」っちゅうファイルがあるはずです。そのファイルをフォルダごと、サーバーにアップロード。

3. アップロードしたrotatorフォルダの中にjpg画像、gif画像、png画像、とにかくランダムに表示したい画像も一緒にほり込んでくださいな。

4. CSS（スタイルシート）に以下のスタイルを追加。

5. 最後に表示したいhtmlに

<div id=”rotator”></div>

って書けば、そこにバックグラウンド画像がランダムに表示されるはずでございます。

デザインblogランキング