特定要素サイズに合わせて背景画像を設置するbackstretchではまった

2014年4月14日

あちこちで紹介されているhtml要素や特定要素にサイズに合わせて背景画像を設置するjQuery backstretch。

今回、どうしてもデザイン上、画像の全画面表示を行いたかったので、使ってみました。

htmlに対して全画面表示をする場合は使う場合は、簡単に画像の表示ができます。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="jquery.backstretch.min.js"></script>
 <script>
	$.backstretch("foo.jpg");
 </script>

ところが、特定要素のサイズに合わせて、背景画像を設置できると書いてあるのですが、これができない。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="jquery.backstretch.min.js"></script>
 <script>
	$("#demo").backstretch("foo.jpg");
 </script>

解決方法はものすごく単純なものでした。

上記の特定要素を指定する場合は、上記のコードを <head>… </head>に書いてはいけません。
body内に書くようにすれば表示できます。
link要素はつい、head内に書くクセがついていると、はまってしまう罠でした。

その他