I have a page which has a style like this in a css file:
body
{
background: #000000 url(images/back_all.gif) repeat-x top;
font: 12px Tahoma, Arial, Helvetica, sans-serif;
color: #666666;
}
and I have either a javascript which is loaded after window.onload and causes page to be expand vericaly and so the rest of my page will become black. how can I apply the background image to my page again after the javascript code is completed?
Some browsers have a bug (chrome, safari) where they do not expand the html body background correctly until a reload occurs. Depending on what you are actually doing in your javascript, there may not be a solution here.
jQuery:
$('body').css('backgroundImage', 'url(something.gif)');
Non-jQuery:
Assign Body an ID: <body id="the_body">
document.getElementById('the_body').style.backgroundImage = "something.gif"
or as John mentioned
document.body.style.backgroundImage = "something.gif";
and furthermore, a T POPs Mentioned, make sure it goes at the end:
<html>
<body>
..... Data ........
<script type="text/javascript">
.... Code ........
</script>
</body>
</html>
The CSS style 'repeat-x' sets the background to only expand horizontally and not vertically. Removing that part from the code will make sure your background repeats in both X (horizontal) and Y (vertical) directions.
i think inserting this at the end of a document could work:
<script type="text/javascript">
var obj= document.getElementByName("body");
obj.style.background = "#000000 url(images/myimage.gif) repeat-x top";
// change color, image and settings
</script>
regards