www.webdeveloper.com
Results 1 to 6 of 6

Thread: Background image change

  1. #1
    Join Date
    Dec 2011
    Posts
    6

    Background image change

    Hi there,

    I'm trying to change the background image of a page (with setInterval eventually, but this is just a button to test it for now). The background image is appearing fine, and the alternate image is nice.

    Code:
    <body style="background-image:url('img/backg.jpg'); background-size: 100%; background-repeat:no-repeat; background-color: #8ba49e;" onload="backg();">
    then this later on in the body:

    Code:
    <input type="button" value="button" onclick="document.body.style.backgroundImage = 'img/backg1.jpg';">
    It's not working. I've also had referred to the background image in onclick as [ICODE]document.body.background[/ICODE] and [ICODE]document.body.backgroundImage[/ICODE].

    What's gone wrong?


    Thanks for your help,
    Matt

  2. #2
    Join Date
    Nov 2010
    Posts
    1,031
    did you try:
    Code:
    <input type="button" value="button" onclick="document.body.style.backgroundImage = 'url(img/backg1.jpg)';">
    ?

  3. #3
    Join Date
    Jan 2012
    Posts
    2
    Exactly, you need to use the same syntax as the CSS, in other words surround the value with url().

    In an unrelated note, for terseness and to create smaller file downloads, the CSS for your body' background should be combined into the shorthand property: background. Like this:

    Code:
    background:#8ba49e 0 0 100% no-repeat url('img/backg.jpg');
    You can view more about this shorthand property at WC3

  4. #4
    Join Date
    Dec 2011
    Posts
    6

    Great fix

    I should have seen that. Thanks so much!

    I have been using that to check that I was able to change the background regularly as a sort of animation using this where backg() is fired on body load:

    Code:
    <script type="text/javascript">
    function backg() {
    	setInterval(tail(), 2000);
    }
    
    function tail() {
    	document.body.style.backgroundImage = 'url(img/backg.jpg)';
    	setTimeout("document.body.style.backgroundImage = 'url(img/backg1.jpg)';", 1000);
    }
    </script>
    As it stands, this has the effect of changing the background once, but then it stops. It's as if tail is called once, but not repeated. In fact, I'm pretty sure that's happening because I reversed the image references (i.e. backg1 being set first and then backg being set), which works.

    Any thoughts on this?
    Thanks again

  5. #5
    Join Date
    Dec 2011
    Posts
    6

    Fixed

    It seems that I needed to change the interval call to just tail not tail() for some reason.

    Thanks anyway

  6. #6
    Join Date
    Nov 2010
    Posts
    1,031
    I'm thinking error console:
    "useless setInterval call (missing quotes around argument?)"

    so either (good):
    Code:
    setInterval(tail, 2000);
    or (not so good, but still works):
    Code:
    setInterval("tail()", 2000);
    but really I think you can simplify - put your image paths in an array, set the interval on body load and let the code do the rest, this way you can add as many images as you like to the loop, just by adding their paths to the array:

    Code:
    <body onload="setInterval(tail, 2000)">
    <script type="text/javascript">
    
    bgs=['url(img/backg.jpg)','url(img/backg1.jpg)']
    
    count=0;
    function tail() {
    	document.body.style.backgroundImage = bgs[count++%bgs.length];
    }
    </script>
    </body>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles