menu
menu

キーワード検索

IE8でも背景画像を固定フルスクリーンにする

  • Labs

jQuery

こんにちは(・∀・)

今回はIE8でもimgタグを使わずに背景画像の固定フルスクリーン表示ができるjQueryプラグインをご紹介します。

CSS3のbackground-sizeを使えば簡単に背景画像の固定フルスクリーン表示ができるのですが、IE8では対応していないため、やむを得ずimgタグを直接HTMLに記述して背景画像の設定をしてきました。今回ご紹介するプラグインを使えばIE8でも簡単に背景画像を固定フルスクリーン表示にする事ができます。

背景画像を固定フルスクリーン

jQueryプラグインは下記リンク先サイトからダウンロードしてください。

Backstretch

ダウンロードボタンをクリックするとコードが表示されますので、すべてコピーします。jsファイル(名前は何でもOK、ここではbackstretch.jsにします)を作ってそれにペーストします。

下記のコードをもう一つjsファイルを作成して(これも名前は何でもOK、ここではbackstretch2.jsにします)記述します。*backstretch.jsファイルに追記でもOK。

JavaScript

$(function () {
$.backstretch("http://www.example.com/パスは絶対パスで記入します/bg.png");
});
HTML

Google Hosted LibrariesからjQuery 1.x snippetを<head>内に読み込みます。それとあわせて先程作ったbackstretch.jsとbackstretch2.jsを同じ様に<head>内に読み込みます。


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="backstretch.js"></script>
<script src="backstretch2.js"></script>

以上でIE8でも背景画像を固定フルスクリーン表示する事ができるようになります。お試しください。

サンプルデモ

サンプルデモはこちら

オリジナルの画像の配置はセンター・センターになっていますが、画像の配置をセンター・トップに変えたい場合、backstretch.jsの中のa.top="-"+f+"px"の部分をa.top="0px"にすればセンター・トップの配置に変更する事ができます。

  • カテゴリー:Labs