IEでのbackground-size使用について

解決済

質問者：tsyok
質問日時：2012/09/14 14:20
回答数：2件

IEでbackground-sizeが使えづに困っています。

Firefoxやクロームでは問題なく動作しているのですが
IEのみ動作しません。

私の使い方が間違っているのでしょうか。

教えてください

body {
background: url(./images/wave.gif) no-repeat center center fixed #000;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-webkit-font-smoothing: antialiased;
position:fixed;
margin:0;
padding:0;
border:0;

}

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： ORUKA1951
回答日時：2012/09/14 16:42

width,heightに%指定をするときは、親コンテナブロックのサイズを決めておかないと・・

bodyの背景で指定する場合は
body{
background: fixed black url("images/1000.png") center no-repeat;
background-clip: border-box;
background-origin: padding-box;
background-size: cover;
}

- 0
- 件

通報する

この回答へのお礼

＞ORUKA1951さん
ご回答ありがとうございます。

IEでbackground-size使えました。
（IE７・８は対応していないのですね）

私のうっかりミスで、開発者ツールのドキュメントモードがIE8標準になってしまっていました。

backgroundの記述について、大変勉強になりました。
ありがとうございます。

通報する

お礼日時：2012/09/14 22:11

No.1

回答者： ORUKA1951
回答日時：2012/09/14 14:44

IEのバージョンは？ 9以降でないと・・

background-size: cover;
-moz-background-size:cover;
-webkit-background-size:cover;
-o-background-size:cover;
-ms-background-size:cover;

　最悪contentプロパティで画像を指定するか、画像自体を配置してしまうか、その場合display:block;width:100%;height:100%;
　ただ、coverはお勧めしません。最近のティ主プレイは縦長も結構あるし・・

- 0
- 件

通報する

この回答へのお礼

＞ORUKA1951さん
ご回答ありがとうございます。

下記ソースのように、書き換えてみたのですが
上手くいきませんでした。
（まったくの初心者なので、記述が大丈夫なのか不安ですが）

<body>
<style type="text/css">

p.sample1:before {content: url(./images/wave.gif);
display:block;
width:100%;
height:100%; }

</style>

<p class="sample1"></p>

</body>

下記サイトのようにしたいと思っております。
http://aprender.redbe.jp/css/background/