menu
menu

IE8でも背景画像を固定フルスクリーンにする | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook2
  • はてなブックマーク0
  • Google+3
  • Pocket0
  • Twitter0

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
  • facebook2
  • はてなブックマーク0
  • Google+3
  • Pocket0
  • Twitter0