Hello all, i am using CSS to stretch a background image and follow the browser window size, which works great! I came up with the idea to set a solid color (black) as the background color, then once the background image has loaded, fade into it?
Here is the CSS i am using, if you could modify it somehow, or give some pointers? (Not sure if this should be in another cat, i don't know what needs to be used)
George
Code:
html {
background: url(images/bg2.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Location: chertsey, a small town 25 miles south west of london, england.
Posts: 1,551
Thanks: 0
Thanked 195 Times in 191 Posts
Hi there cartoongeorge96,
add this to the head section of the document...
Code:
<script type="text/javascript">
var c=100;
var delay=2000; /* change this value to suit */
var speed=30; /* change this value to suit */
function init(){
document.getElementsByTagName('html')[0].style.backgroundColor='#000';
document.getElementsByTagName('html')[0].style.backgroundSize=c+'%';
c--;
if(c<0){
return;
}
setTimeout(function(){init()},speed);
}
window.addEventListener?
window.addEventListener('load',function(){setTimeout(function(){init()},delay)},false):
window.attachEvent('onload',function(){setTimeout(function(){init()},delay)});
</script>
The code works well in IE9, Firefox 7 and Safari 5, but Opera 11 reduces size in a slightly jerky manner.
Thanks for your reply, Chertsey? near thorpe park (which is my actual background) :P
Anyway, the codes works how i want it to, except it does it back to front, it loads the image then transitions to black. Maybe it was something i did, also can you change the transition to a simple fade?
Hey, thanks for the code mate, just one more thing, could you post the code without my site wrapped round it, i can't seem to find the actual full code :/
I also put all of the your embedded CSS within one....
Code:
<style type-"text/css">
</style>
...instead the multitude that you used.
Finally I removed my original javascript and added the revision to your preload script...
Code:
<script type="text/javascript">
function PreloadImages(){
var imageObj = new Image();
var images = new Array();
images[0]="./images/homepressed.png";
images[1]="./images/designpressed.png";
images[2]="./images/hostingpressed.png";
images[3]="./images/aboutpressed.png";
for (var i=0; i<=3; i++)
{
imageObj.src = images[i];
}
}
var c=0;
var delay=2000;
var speed=30;
function init(){
document.getElementsByTagName('html')[0].style.backgroundSize=c+'%';
c++;
if(c>100){
return;
}
setTimeout(function(){init()},speed);
}
window.addEventListener?
window.addEventListener('load',function(){setTimeout(function(){init()},delay)},false):
window.attachEvent('onload',function(){setTimeout(function(){init()},delay)});
</script>
Before you post, read our: 
