[み]jQueryで、画面いっぱいに背景画像を表示する方法

久しぶりの、きっと誰かの役に立ちそうなものです。今回紹介するのは、jQueryを使ってブラウザの画面いっぱいに背景画像を表示する方法です。どんなカンジかというと、まずノーマルの状態です。

で、こっちが縮小した(ブラウザはでっかくなった)状態です。

サイズを変更しても、背景画像はかわりません。

jQueryプラグイン「jQuery Backstretch」を使う

実装方法はおどろくほどカンタンですので、気をつけてください。

  1. 「jQuery Backstretch」をダウンロードする
    Backstretch
  2. head内に次のコードをコピペ!
    <script type="text/javascript" src="/js/jquery.backstretch-1.1.min.js"></script><br />
    <script type="text/javascript">
      $.backstretch("http://hoge.com/img/back.jpg");
    </script>

これだけでOKです。ポイントは、背景画像のURLをフルパスで指定してやることです。カンタンすぎてこまりますね。でも、このカンタンさがjQueryのいいところですよね。

今回もいつも通り、基本的にコピペで実装できますので、どんどんコピペしてくださいね:)

jQueryを勉強しましょう

htmlとかCSSとかはなんとなくわかってきたんだけど、jQueryって聞くとなかなか手がでない… そんな方はきっとたくさんいますよねw でも、jQueryって、実はカンタンなんです。

でも、jQuery 日本語リファレンスとか見ても、これをどう使ったらいいのかいまいちピンとこない… ええ、たしかにそうですよね。ある程度わかってくると、リファレンス見ても理解できるんですが、最初のとっかかりとしては、なかなか難しいと思います。

なので、そんな方には、本をおススメします。KindleとかKoboとか電子書籍がこれだけ世の中に広まったというのに、紙の本をおススメします!

実際にWebサイトでの使用例が載っているので、jQueryってこんなことできるんだ!という感想を持ちます。それで、もちろんコードも載っているので、自分のサイトにも応用できちゃうわけですね。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentYour Message

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

checkboxみはら.comはエックスサーバーです

editNEW エントリー

PAGE TOP arrowup