...

View Full Version : Load a css background image last



kevinkhan
07-02-2012, 11:08 AM
in my css file i have set up the following styles on my page



body
{
min-height:900px;
background-color:#0058A4;
font-family: Arial, Helvetica, sans-serif;
color:#555555;
background-image: url(../images/footerBg1.gif);
background-position:center bottom;
background-repeat: repeat-x;
}

The styles are in a septerate file called stylesheet.css and i have a link to this in the head of my page.

How do i write some js to make the background image load after all the content on the page is loaded?

xelawho
07-02-2012, 01:09 PM
put this just before your closing </body> tag:



<script type="text/javascript">
document.body.style.background="url(../images/footerBg1.gif) repeat-x center bottom"
</script>


and I guess you would want to change your css to this:

body
{
min-height:900px;
background-color:#0058A4;
font-family: Arial, Helvetica, sans-serif;
color:#555555;
}

this will make the background image start to load after everything else has started to load, but if that image is small and others further up are large, obviously the background may end up finishing loading before others have. give it a go, anyway.

kevinkhan
07-02-2012, 03:22 PM
put this just before your closing </body> tag:



<script type="text/javascript">
document.body.style.background="url(../images/footerBg1.gif) repeat-x center bottom"
</script>


and I guess you would want to change your css to this:

body
{
min-height:900px;
background-color:#0058A4;
font-family: Arial, Helvetica, sans-serif;
color:#555555;
}

this will make the background image start to load after everything else has started to load, but if that image is small and others further up are large, obviously the background may end up finishing loading before others have. give it a go, anyway.

This didnt work for me. it left out some of the styles in the main stylesheet.css

What is wrong with this code


<script type="text/javascript">
function loadBG(){
document.getElementsByTagName('body')[0].style.backgroundImage="url(images/footerBg1.gif)";
}
window.onload=loadBG();
</script>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum