2013-11-11 2 views
0

Я создаю свою собственную дочернюю тему, основанную на теме по умолчанию BuddyPress. Мне нужно иметь фоновое изображение, растянутое на 100% ширину/высоту. Он отлично работает в Chrome и Firefox, но в последней версии IE изображение просто сидит в центре, в оригинальном размере. Не происходит растяжения. Вот CSS я использую, что это просто увеличение родительской темы (тема ВР по умолчанию):Как растянуть фоновое изображение в IE в BuddyPress child theme

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%; 
} 

Спасибо заранее. Dima

ответ

0

IE9 + поддерживает CSS3 background-size: функция обложки, но 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:

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

... 

исходную ссылку, если вы хотите узнать больше об этом и несколько других опций: http://css-tricks.com/perfect-full-page-background-image/