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

特定要素サイズに合わせて背景画像を設置する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内に書くクセがついていると、はまってしまう罠でした。

プロフィール

荒岩 理津子
荒岩 理津子株式会社アールジャパン 代表取締役
株式会社東芝にてソフトウェア開発11年、サスペンションメーカーの広報6年、国立大学情報システムセンター非常勤職員、個人事業主を経て、2016年9月に株式会社アールジャパンとして法人化。WordPressに特化したWEBシステムの開発に携わる。Microsoft Visual Basic®のプログラミングに関する著書が9冊、そのうち一部は国立図書館に寄贈されている。色彩検定1級、Shoplifyパートナー。趣味は手芸一般。編み物歴、洋裁歴は四半世紀以上。神奈川県中小企業家同友会 広報委員会副委員長・編集長。