jQueryプラグイン「MaxImage 2」を使ってサイトの背景に写真をフルスクリーンで表示させる方法

jQueryプラグイン「Maximage2」を使うと、ブラウザの幅と高さいっぱいに一枚の画像を背景として表示させることができます。

(1)jquery.maximage.jsとjquery.maximage.cssをakv2/MaxImageよりダウンロードし、任意のディリクトリに設置して下さい。表示させたい画像もご自身でご用意して下さい。

(2)以下のコードでhtmlを作成すると、ブラウザの幅と高さいっぱいに一枚の画像を背景として表示させることができます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
    <script type='text/javascript' src='jquery.maximage.js'></script>
    <link rel="stylesheet" type="text/css" href="jquery.maximage.css" />
    <script type="text/javascript">
        jQuery(function(){
            jQuery('#maximage').maximage();
        });
    </script>
</head>
<body>
    <div id="maximage">
        <img src="sample.jpg" alt="sample" /><!--背景として利用する画像-->
    </div>
</body>
</html>

Demo

コメントをどうぞ！