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 vertically and so the rest of my page will bee black. how can I apply the background image to my page again after the javascript code is pleted?
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 vertically and so the rest of my page will bee black. how can I apply the background image to my page again after the javascript code is pleted?
Share Improve this question edited Feb 5, 2019 at 11:30 Paul Floyd 6,9365 gold badges33 silver badges49 bronze badges asked Jul 28, 2009 at 14:24 JGCJGC 13k10 gold badges36 silver badges57 bronze badges 4- When you say "causes page to be expanded vertically" what do you mean? Do you mean the browser window or some html element? – ChrisLively Commented Jul 28, 2009 at 14:27
- yes it will add ponenet to page – JGC Commented Jul 28, 2009 at 14:28
- I don't think you answered his question...Does the window (physical browser) expand or does an element expand like a Div. – user140125 Commented Jul 28, 2009 at 14:31
- I don't know why, but I thought the question was 'how can I apply the background image to my page again after the javascript code is pleted?' – Tyler Carter Commented Jul 28, 2009 at 14:32
8 Answers
Reset to default 10jQuery:
$('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>
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
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.
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.
Take a look at:
Dynamic CSS Changes
which shows a way to achieve what you want via Javascript.
will give an example hope it will helpful for you.
<a class="t-hub" href="#" title="T-HUB">
<div>
<img src="../../images/TBO_Tran_Logo.png" class="imglogocenter" alt="" style="width: 110px; height: 64px;margin: -6px 0 0;">
</div> </a>
You see the class **imglogocenter** we can call the class which page we have to change the image dynamically,go through that page and put in a css property changes in a loading function .Dont go and change the css property in the main page.
Here I can demonstrate
Example:
$(function () {
// $('#dvLoading').fadeOut(2000);
$('.imglogocenter').css('margin','-11px 0 0');
});
Try this using Javascript, just form a array in script and use a random method http://suzzcodes./how-to-change-the-website-background-dynamically/
Well, if you are like me and you are new to javascript and jQuery you will find this task a lot formidable. But you are in luck, because I have found a solution. Try this:
Link jQuery before doing this:
$(function es() {
$('body').addClass('sec');
});
and do this in CSS:
body {
background-Image: url(../someImage);
}
.sec {
background-Image: url(../anotherImage);
}
What this mainly does is it gives the body a class of second and in css second has a different background image as the body so it overites the body css rule // I think // I am also new to this //