0

BuddyPress のデフォルト テーマに基づいて、独自の子テーマを作成しています。幅/高さを 100% 引き伸ばした背景画像が必要です。Chrome と Firefox では問題なく動作しますが、最新バージョンの IE では、画像は元のサイズのまま中央に表示されます。ストレッチは行われません。私が使用している CSS は次のとおりです。これは、親テーマ (BP の既定のテーマ) を拡張したものです。

body {
background-color: #000000;
background-image: url(images/DSC09005cc.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #555;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
line-height: 170%;
max-width: 1250px;
margin: 0 auto;
width: 95%;
}

前もって感謝します。ディマ

4

1 に答える 1

0

IE9+ は CSS3 の background-size:cover 機能をサポートしていますが、IE8 以前はサポートしていません。IE 8 以前でこれを修正しようとしている場合は、次のような方法をお勧めします。

HTML:

<body>
     <img src="images/DSC09005cc.jpg" class="fit-background">
...

CSS:

img.fit-background {
     min-height: 100%;
     min-width: 1024px;
     width: 100%;
     height: auto;
     position: fixed;
     top: 0;
     left: 0;
}

@media screen and (max-width: 1024px) {
     img.fit-background {
          left: 50%;
          margin-left: -512px;
     }
}

...

IE 6、7、および 8 以外のブラウザーから画像を非表示にする場合は、IE 条件文に画像を配置できます。

<body>
<!--[if lt IE 9]>
     <img src="images/DSC09005cc.jpg" class="fit-background">
<![endif]-->

...

それと他のいくつかのオプションについて詳しく読みたい場合は、元のリンクを次に示します。http://css-tricks.com/perfect-full-page-background-image/

于 2013-11-11T21:46:26.667 に答える