how to change html background dynamically
Question
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 become black. how can I apply the background image to my page again after the javascript code is completed?
8 answers
solution1
9 ACCPTED 2009-07-28 14:28:44
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>
solution2
2 2009-07-28 14:32:19
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
solution3
0 2009-07-28 14:28:22
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.
solution4
0 2009-07-28 14:31:09
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.
solution5
0 2009-07-28 14:32:02
solution6
0 2013-07-19 10:05:31
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');
});
solution7
0 2013-10-06 16:29:35
使用Javascript尝试此操作，只需在脚本中形成数组并使用随机方法http://suzzcodes.com/how-to-change-the-website-background-dynamically/
solution8
0 2014-05-11 18:25:44
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 //
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.