Растяжка фона до 100% в firefox

В настоящее время я работаю с фоновым скриптом javascript, который меняет фон по таймеру, а в отношении дня и ночи это прекрасно работает, но я пытаюсь растянуть фон на 100% ширины браузера, я сделал это через ССЦ. Он работает в сафари и хроме, но не в файрфоксе (может быть, и в IE тоже), вместо этого он видит 100% как отображение изображения в 100% его размера, может ли кто-нибудь помочь?

Я не уверен, есть ли хак для работы с телом, или мне придется переписать javascript в div или что-то еще, но не знаю, как это сделать, поэтому любая помощь приветствуется!

JavaScript

    <script language="JavaScript1.2">

//Specify background images to slide
var bgslides=new Array()

var currentTime = new Date().getHours();
if (9 <= currentTime && currentTime < 18) {
   bgslides[0]="images/webcam1.jpg"
   bgslides[1]="images/webcam2.jpg"
   bgslides[2]="images/webcam3.jpg"
}
else
{
   bgslides[0]="images/webcamnight.jpg"
   bgslides[1]="images/webcamnight.jpg"
   bgslides[2]="images/webcamnight.jpg"
}

//Specify interval between slide (in miliseconds)
var speed=5000

//preload images
var processed=new Array()
for (i=0;i<bgslides.length;i++){
processed[i]=new Image()
processed[i].src=bgslides[i]
}

var inc=-1

function slideback(){
if (inc<bgslides.length-1)
inc++
else
inc=0
document.body.background=processed[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("slideback()",speed)')
window.onload=new Function('setInterval("slideback()",speed)')

</script>

и CSS

  body{

background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%


}

browser image background firefox stretch
person Amy    schedule 17.03.2011    source источник

Ответы (3)


arrow_upward
1
arrow_downward

попробуйте использовать:

background-size: cover;

or

background-size: 100% cover;
person tnt-rox    schedule 25.01.2012

arrow_upward
0
arrow_downward

Хотя это свойство является новым в Gecko 1.9.2 (Firefox 3.6), в Firefox 3.5 можно полностью растянуть изображение поверх фона с помощью -moz-border-image.

    .foo {
           background-image: url(bg-image.png);

           -moz-background-size: 100% 100%;         /* Gecko 1.9.2 (Firefox 3.6) */
           -o-background-size: 100% 100%;           /* Opera 9.5 */
           -webkit-background-size: 100% 100%;      /* Safari 3.0 */
           background-size: 100% 100%;              /* Gecko 2.0 (Firefox 4.0) and other CSS3-compliant browsers */

           -moz-border-image: url(bg-image.png) 0;  /* Gecko 1.9.1 (Firefox 3.5) */
    }

Вы также можете попробовать имитировать растяжение фона:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
       <head>
           <title>Stretched image in background</title>

           <style type="text/css">
              body, html { margin: 0; padding: 0 }
              #bgimg { position:absolute; z-index:-1; width:100%; height:100% }
           </style>

      </head>
      <body>

         <img id="bgimg" src="http://www.lcvm.nl/images/nieuwsbrief/illusie2.gif" />
         <!-- content will go here -->

      </body>
  </html>

Через dom можно изменить img.

person nrii    schedule 17.03.2011
comment
не работает, я не уверен, может быть, это потому, что я не указываю фон в css? это в функции javascript. - person Amy; 17.03.2011
comment
Вы можете попробовать подделать растягивающийся фон. Я отредактирую ответ с примером. - person nrii; 17.03.2011
comment
который просто растягивает все изображения на странице? - person Amy; 17.03.2011
comment
Дайте img идентификатор, а в css используйте #bgimg, см. пример выше ^_^ В dom используйте getElementById(). - person nrii; 17.03.2011
comment
okdoke, понял, но изображения объявлены в javascript, а не в html, повлияет ли это на это? Вместо этого я бы использовал div, я думаю, для bg img, но не уверен, правильно ли я делаю javascript... что-то вроде... codedocument.getElementById(bgimg)body.background=processed[inc].src - person Amy; 17.03.2011
comment
Начните с базового img, а затем переключитесь на js. Но если вы хотите начать не с базового изображения, а со случайного изображения, вы можете использовать окно onLoad. Создайте функцию для примера init(), где вы случайным образом выберете изображение и создадите элемент img на странице (с идентификатором bgimg). - person nrii; 17.03.2011
comment
Хорошо, понял, у меня в любом случае есть базовый img, так что все в порядке, но я просто не знаю, как конкретно интегрировать getelemnt в javascript, я пробовал, но он вообще не работает. Не очень хорошо с javascript .. - person Amy; 17.03.2011
comment
ммм не очень помогло, пытался интегрировать с советами, но это просто не сработает. :( кто-нибудь еще что-нибудь знает? - person Amy; 17.03.2011

arrow_upward

arrow_downward

person    schedule
comment
Пробовал это раньше, только что сделал снова, не работает, понятия не имею, почему, я знаю, что это стандартный хак, я не уверен, что он в теге тела мешает... - person Amy; 17.03.2011