• かちびと.net

    ブラウザに合わせて背景画像のサイズを自動で合わせてくれるスクリプト・jQuery Backstretchのご紹介。ユーザーがどんなモニタ環境でも背景画像を自動で合わせてくれますよ。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ブラウザに合わせて背景画像のサイズを自動で合わせてくれるスクリプト・jQuery Backstretch

スポンサーリンク

とても楽そうだったのでメモです。画面
のサイズに合わせて自動で背景画像
をリサイズしてくれるので背景画像を
固定できる、というもの。jQueryのプラ
グインなので手軽でいいですね。ユー
ザーがどんなモニタサイズでも同じ
背景画像を表示させることが出来ます。

以前、同じ機能のjQueryプラグインがPHPSPOTさんでも紹介されていましたが、複数覚えておいて損はないのでご紹介します。

jQuery Backstretch


↑ これがデフォルト。

↑ ご覧のようにサイズを変更しても背景画像は変わりません。

自動で背景画像をストレッチさせるので、環境の違いによる背景画像の表示の差が生じることも無い、というもの。

使い方は非常に単純で、jQuery Backstretchを読み込んでから画像を指定すればおkです。

<script type="text/javascript" src="/js/jquery.backstretch-1.1.min.js"></script><br />
<script type="text/javascript">
  $.backstretch("画像のURLをフルパスで指定");
</script>

こいつは楽ですな・・・以下よりデモとDLが可能です。

jQuery Backstretch

URL :
TRB :

Comments & Trackbacks (4)

  1. カワタ

    はじめまして。カワタと申します。
    このプラグインに関して質問させて下さい。
    safariで確認したところ全画面表示(ブラウザいっぱいに画像が表示)されていませんでした。
    こちらsafariでも全画面表示できる解決方法を教えていただけませんでしょうか?

    • シロ

      はじめまして、こんにちは。
      頂いたコメントを元に、デモをSafariで確認したところ問題なく全画面表示になっていました。

      尚、確認したバージョンは5.1.7です。

      もし、ブラウザのバージョンが古いようでしたら上げてみては如何でしょうか。

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services