Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

[jQuery] 背景画像を画面いっぱいにするプラグイン

公開日: : jQuery, Web制作 ,


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

背景に、画像をいっぱいに広げて表示したいときってありますよね。
ちょうど、そういう必要があったため、jQueryのプラグインをたくさん試しました。

そんな中から、本当に使えたプラグインを紹介します。

BACKSTRETCH

設置も簡単かつ、軽量で使い勝手が本当によかったです。
かなりの数のプラグインを試しましたが、画面サイズをぐりぐり変えても問題ないなと思ったのが、BACKSTRETCHだけでした。

ダウンロードは下記のページからできます。

http://srobbin.com/jquery-plugins/backstretch/

設置方法

まずは、jsを追加していきます。

<script src="js/jquery.js"></script>
<script src="js/jquery.backstretch.min.js"></script>

そして、背景画像を設定します。

$(function(){
 $("body").backstretch("images/ctn_04.jpg");
});

これで、完成です。
画面いっぱいに表示したいので、このようにbodyに設定する事が多いでしょう。

他の要素に設定したいよ!って場合は、下記のようにしましょう。

<div id="bg"></div>
$(function(){
 $("#bg").backstretch("images/ctn_04.jpg");
});

これで、idがbgの部分にいっぱいに表示されます。

さらに、画面いっぱいでスライドショーもしたいよ!という要望にも応えられます!

設定方法は、

$(function(){
$("#bg").backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});
});

このように、画像の数をふやして、切り替えのタイミングを設定するだけです。
導入してもよさそうな気になりますよね。

まとめ

実際に、かなりたくさんのプラグインがありますし、個人個人で使用の仕方も違いますから一概にこれが一番とは言えません。

ですが、今回かなりの数を試したときに、最初は全画面で表示されるけどウィンドウサイズを変更したら背景もおかしくなっちゃうってことがすごく多かったです。
BACKSTRETCHだけは、思い通りになりました。

しかも、多くのプラグインはbodyのすぐ下にimgタグを置いちゃうんです。
それもあまり好きではないなーと感じていたので、BACKSTRETCHが一番しっくり来ました。

背景に画像を画面いっぱいに表示したいよ!って時は、是非使ってみてください。

ad

関連記事

[html5] おさらいがてらWordPressのテーマを作るためにHTML5で一から作るよ![第3回]

ブログの存在すら忘れてました、僕です。 完全放置プレイだったこの連載?を再開しなきゃと思い、重

記事を読む

[CSS] 今さらだけど、必ず覚えておきたいCSSセレクタ

CSSセレクタとは? CSSセレクタを意識する事はあまりないと思いますが、今回はおさらいがてら、C

記事を読む

[jQuery] フルサイズ(ブラウザいっぱい)で画像を表示するlightbox風プラグインの紹介 [ギャラリーサイト向け]

jQuery fullsizable plugin ブラウザ画面いっぱいに画像を表示したい時に使え

記事を読む

no image

[CSS] 今さらだけど、覚えておきたい疑似クラス・疑似要素

さて、前回は、CSSのセレクタをおさらいしました。 そして、属性セレクタを取り上げている記事も合わ

記事を読む

[jQuery] Block Scrollプラグイン

今回は、ブロック毎にスクロールするjQueryプラグインのご紹介です。 Block Scroll

記事を読む

[CSS]印刷用CSSの設定方法

印刷用のCSSは、設定が簡単! 普通にサイトを作っていると、結構印刷用のCSSの設定もお願いされま

記事を読む

[Dreamweaver] 便利な検索&置換

Dreamweaverの検索&置換は、便利な機能が満載! サイトを制作する上で厄介になってくるのが

記事を読む

[Dreamweaver] テンプレートの入れ子

テンプレートは入れ子に出来る! Dreamweaverのテンプレートは、ベースを作り、さらにそのベ

記事を読む

[Dreamweaver] サイトタイトルを入力する枠を広げる!

デフォルトのままじゃ、狭い! DreamWeaverのタイトルを入力する枠があると思いますが、これ

記事を読む

[Dreamweaver] 不要な_notesを作成させない方法

みなさん、_notesで困ってませんか? Dreamweaverは、デフォルト設定で使用していると

記事を読む

ad

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ad

[PHP] curl転送してみる(googleに)

curlでgoogle画像検索APIにアクセスしてみます。 cu

[PHP] PDOでMySQLの接続確認をする

PDO PHPでMySQLに接続する際には、mysql_connec

[PHP] ランダムな英数字を生成する

便利系メソッド 今回はPHPでランダムな英数字を作成してみます。

[Swift] プロパティリスト(plist)の値を取得

plistからデータを取得してみます。 こちらのエントリーも参考にし

[Swift] Asset Catalogについて

XCode5から追加されたAsset Catalog。 いままで標準

→もっと見る

  • 1978年の七夕生まれ。 25才でweb業界の門を叩き、28才でフリーランスに。 現在は、フリーランスでマークアップ中心に、wordpressのカスタマイズやデザインをしております。 また、iPhoneアプリの開発もしております。

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524
PAGE TOP ↑

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/users/1/juny/web/hidef/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524