Проблем с фона под IE

L

lubo91

Registered
Защо според вас може да не се показва фона под IE?

Направил съм го по следния начин с 4 картинки които застават в четирите края на екрана.

Код: 
 HTML

<div id="bg">
     
  <div id="wrap">
     
   </div>

</div>



CSS
#bg{ width:100%; height: 100%; background-image: url(/images/top_left.png), url(/images/top-right.png), url(/images/bot_left.png), url(/images/bot_right.png); 
background-repeat:no-repeat; 
background-position:top left, top right, bottom left, bottom right; }

#wrap{  тук му задавам минимална височина   }

Под Crome, FF и Opera ми излиза а под IE НЕ!
 
Лошо! А случайно да знаеш как може да се "излъже" или някакви алтернативни варианти ?
 
Да се излъже не знам дали има начин, но правиш още 2 елементаи , с която стават 4 дива, на всеки слагаш картинка ;)
 
т.е . структурата да е следната ?

Код: 
HTML 


<div id="bg1"></div>
<div id="bg1"></div>


   <div id="wrap"></div>


<div id="bg1"></div>
<div id="bg1"></div>
 
Код: 
<div>
    <div>
          <div>
                   <div>
                        <div id="wraper"></div>
                    </div>
            </div>
    </div>
<div>

Може така, както и може, вместо 4 елемента да оставиш само 2 , а 2-те картинки да ги сложиш на html и body ;)
 
Започнах да го правя, но още при първия слой нищо не се получава. Сложил съм му една червена "граница" за да виждам как застава. Слоя си застава точно където му е казано но пустата картинка не се вижда, докато под останалите браузери всичко си е в ред.

това използвам като CSS

#bg1{ width:357px; height:479px; background:url(/images/top_left.png)top left; border: 1px solid red;}
 
Оправих го :)

Ето какво направих
Код: 
*{ margin:0; padding:0; }
html, body, #wrap { min-height:500px;}

#bg1{ width:357px; height:479px; background:url(/images/top_left.png); background-position: top left;}
#bg2{ width:312px; height:479px; background:url(/images/top-right.png); position:relative; top:0%; left:100%; margin-top:-479px; margin-left: -312px;}
#bg3{ width:430px; height:339px; background:url(/images/bot_left.png); position:relative; top:100%; left:0%; margin-top:-339px; margin-left:0px;}
#bg4{ width:287px; height:339px; background:url(/images/bot_right.png); position:relative; top:100%; left:100%; margin-top:-339px; margin-left: -287px;}
#logo{ height:62px; width:174px; background:url(/images/logo.png) no-repeat;  position: fixed;top: 50%;left: 50%; margin-top: -31px; margin-left: -87px;}
 
tedobedo каза:
Същност има префикс за "множество фонови изображения", който да работи под IE! ;)
Увеличете...
Мислиш ли ,че е по-добър вариянта с тоя хак? Дай линк да го видя тая чудесия?
 
Аз мисля, че css3pie е добър вариант :) Маха необходимостта от толкова вложени дива, че да ти се оплетат очите :!: Иначе и на мен ми е интересно какъв е тоя префикс? :)
 
Код: 
body {
	background: url('all_layers.jpg') no-repet 0 0;
	background-image:
	url('first_layer.png'),
	url('second_layer.png'),
	url('third_layer.png'),
	url('fourth_layer.png');
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
	background-position: 0 0, 0 50, 0 100, 0 200;
	-ms-filter: "progid:DXImage Transform.
	Microsoft.AlphaImageLoader(scr='body-top.gif', sizingMethod='scale')";
	filter: progid:DXImage Transform.
	Microsoft.AlphaImageLoader(scr='body-top.gif', sizingMethod='scale')";
	zoom: 1;
	}

Източник: .NET брой: 210
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе