Stretching background to 100% in firefox
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=proces开发者_运维问答sed[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;
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 */
While this property is new in Gecko 1.9.2 (Firefox 3.6), it is possible to stretch a image fully over the background in Firefox 3.5 by using -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) */
}
You can also try to fake stretching a background:
<!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>
By way of dom you can change the img.
加载中,请稍侯......
精彩评论