中小企業専門、ヒアリング重視。
横浜のホームページ制作会社 株式会社アールジャパン

切り絵レースネックレス、および切り絵レースウェディングベールはこちらです。

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

あちこちで紹介されている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内に書くクセがついていると、はまってしまう罠でした。