ホーム
/
javascript
/
IE8でbackground-sizeの指定が効かない！そんな時はbackgroundSize.jsで解決！

IE8でbackground-sizeの指定が効かない！そんな時はbackgroundSize.jsで解決！

投稿日: 2015年7月11日2018年8月16日投稿者: kishiken

目次

1 解説
2 HTML
3 CSS
4 jQuery

解説

IE8ではCSS3のbackground-sizeの指定が効きませんが、 jquery.backgroundSize.jsというjQueryプラグインを使用すると、背景のbackground-size指定ができます。 jquery.backgroundSize.jsはこちらでダウンロードしてください。

→動作確認デモはこちら

ライトプラン　詳細はこちら

HTML

<div class="main">
    <h1>jquery.backgroundSize.jsの実験</h1>
    <h2>IE8で閲覧してください。</h2>
    <p><a href="http://louisremi.github.io/jquery.backgroundSize.js/demo/">jquery.backgroundSize.js</a>を使うとIE8でもbackground-sizeの指定ができます。</p>
    <div class="bg">
        <p>jquery
            <br>処理なし</p>
    </div>
    <div class="bg contain">
        <p>jquery処理あり
            <br>contain</p>
    </div>
    <div class="bg cover">
        <p>jquery処理あり
            <br>cover</p>
    </div>
</div>

CSS

.main {
    width: 960px;
    margin: 0 auto;
    border: 1px solid #ccc;
    padding: 50px;
    text-align: center;
    margin: 50px;
    vertical-align: top;
}
.bg {
    width: 200px;
    height: 200px;
    background: url(images/dog.png) no-repeat;
    background-size: contain;
    border: 1px solid #ccc;
    display: inline-block;
    text-align: left;
    margin: 20px;
    padding: 10px;
}

jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">$.debugBGS = true;</script>
<script src="./jquery.backgroundSize.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $(".contain").css({backgroundSize: "contain"});
  $(".cover").css({backgroundSize: "cover"});
});
</script>