グラデーションのある複数の背景があり、Firefox、Chrome、Safariで機能し、モバイルデバイス用の特定のメディアクエリがあります。
いつものように、問題はInternetExplorerです。以前は、単一の背景画像を読み込んだIEの条件付きスタイルシートを使用していましたが、私が知る限り、IE10はCSSで<!-IfIE->をサポートしていません。
理想的には、css3グラデーションと個別の背景画像をすべてのブラウザーで機能させたいのですが、すべてのIEブラウザーで単一の背景画像を使用できてうれしいですが、これまでのところ、単一の背景画像はIEでは機能しません。
mainstyle.cssのCSS
body{
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5), -webkit-gradient(radial, 50% 20%, 0, center center, 500, from(#c0deff), to(#509deb));
background-image:
url(../img/bknd_img1.png),
url(../img/bknd_img2.png),
url(../img/bknd_img3.png),
url(../img/bknd_img4.png),
url(../img/bknd_img5.png), -moz-radial-gradient(center center, circle contain, #c0deff, #509deb);
background-attachment:fixed;
background-position:top right, top left, center bottom, bottom right, left bottom;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
background-color:#509deb;
display:block;}
Internet ExplorerのCSS:style-ie.css
font:14px 'questrialregular', Arial, Helvetica, sans-serif;
margin:0;
width:100%;
color:#797979;
background-image: url('img/bknd_full_img.jpg');
background-attachment:fixed;
background-position:center top;
background-repeat: no-repeat;
background-color:#fff;
display:block;
}