CODEWITHSUNDEEP
javascripthtml
JGC
JGC

Reputation: 12997

how to change html background dynamically

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?

Upvotes: 2

Views: 25331

Answers (8)

David Saint
David Saint

Reputation: 29

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 //

Upvotes: 0

Susham Nandi
Susham Nandi

Reputation: 23

Try this using Javascript, just form a array in script and use a random method http://suzzcodes.com/how-to-change-the-website-background-dynamically/

Upvotes: 0

Praveen04
Praveen04

Reputation: 993

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');        
    });

Upvotes: 0

Tyler Carter
Tyler Carter

Reputation: 61557

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>

Upvotes: 10

Atmocreations
Atmocreations

Reputation: 10061

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

Upvotes: 2

CraigTP
CraigTP

Reputation: 44909

Take a look at:

Dynamic CSS Changes

which shows a way to achieve what you want via Javascript.

Upvotes: 0

Duroth
Duroth

Reputation: 6581

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.

Upvotes: 0

ChrisLively
ChrisLively

Reputation: 88044

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.

Upvotes: 0

Related Questions