Растяжка фона до 100% в Firefox - PullRequest
Новая
       46

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

0 голосов
/ 17 марта 2011

В настоящее время я работаю с фоновым сценарием javascript, который меняет фон на таймере, и в отношении дня и ночи это прекрасно работает, но я пытаюсь сделать фон растягивающимся до 100% ширины браузера.мы сделали это через CSS.Он работает в Safari и Chrome, но не в Firefox (может быть, и в 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%


}

Ответы [ 3 ]

1 голос
/ 25 января 2012

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

background-size: cover;

или 

background-size: 100% cover;
0 голосов
/ 17 марта 2011

Хотя это свойство является новым в 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 вы можете изменить изображение.

0 голосов
/ 17 марта 2011 
background-size: 100% 100%; /* w3 spec - no browser supports it yet */
-moz-background-size: 100% 100%; /* used for firefox */
-o-background-size: 100% 100%; /* used for opera */
-webkit-background-size: 100% 100%; /* used for safari and chrome */
...