在Firefox中将背景拉伸至100％ [英] Stretching background to 100% in firefox

问题描述

我目前正在使用一个JavaScript背景脚本来改变一个计时器的背景，并参考白天和黑夜这个伟大的工程，但我试图让背景延伸到100％的浏览器宽度，通过CSS做到了这一点。它在safari和chrome中工作，但不是firefox（也许IE），而是看到100％的图像显示在100％的大小，任何人都可以帮助？

我不确定是否有一个黑客身体的工作，或者我将不得不重写JavaScript的div或东西，但不知道如何，所以任何帮助表示赞赏！

javascript

 < script language =JavaScript1.2> 
 
 //指定背景图片幻灯片
 var bgslides = new Array（）
 
 var currentTime = new Date（）。getHours（）; 
 if（9  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
} 
 
 //指定幻灯片（以毫秒为单位）
 var speed = 5000 
 
 //预加载图片
 var processed = new Array（）
 for（i = 0; i< bgslides。 length; i ++）{
 processed [i] = new Image（）
 processed [i] .src = bgslides [i] 
} 
 
 var inc =  - 1 
 
函数slideback（）{
 if（inc  inc ++ 
 else 
 inc = 0 
 document .body.background = processed [inc] .src 
 
 $ b $ if（document.all || document.getElementById）
 window.onload = new Function（'setInterval（ （））
 
 
 
 
 
 
 
 $ b $ PT> 
  

和css

  body {
 
 background-position：0 0; 
背景重复：不重复; 
 background-attachment：fixed; 
 background-size：100％
 
 $ b} 
  

  background-size：cover; h2_lin>解决方案




或

  background-size：100％覆盖; 
  

I am currently working with a javascript background script that changes the background on a timer and and in reference to day and night this works great but I'm trying to make the background stretch to 100% of the browser width, I've done this through CSS. It works in safari and chrome but not firefox (maybe IE too) instead it see's the 100% as showing the image at 100% of it's size, can anybody help?

I'm not sure if there is a hack to work with body or I'll have to rewrite the javascript to a div or something but not sure how, so any help is appreciated!

The 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>

and the css

  body{

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


}

解决方案

try using:

background-size: cover;

or

background-size: 100% cover;

这篇关于在Firefox中将背景拉伸至100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！