Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5

Thread: Change BG Image

  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Change BG Image

    Hello! Thank you for your time.

    My problem is, I would like to be able to change the background image of my webpage with three different buttons- each changing the background to something different (obviously).

    I tried different things with javascript and stylesheets, and a few times I almost had it. I am new to this, so any help would be much appreciated!

  • #2
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    This is assuming that you have set the background image as a property of the BODY tag either inline or via CSS.

    *** Note, the URL's used in this for background images were just random links from a google search, these can point to anything, locally or a remote image, so not my images. ***

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    
    <body style="background-image:url(http://www.dvd-ppt-slideshow.com/images/ppt-background/background-3.jpg)">
    
    <input type="button" name="button" value="Change" onclick="document.body.style.backgroundImage = 'url(http://www.psdgraphics.com/wp-content/uploads/2009/05/abstract-purple-background.jpg)';" />
    
    <input type="button" name="button" value="Original" onclick="document.body.style.backgroundImage = 'url(http://www.dvd-ppt-slideshow.com/images/ppt-background/background-3.jpg)';" />
    </body>
    </html>
    Last edited by ARCLite Studio; 02-03-2012 at 04:56 PM.

  • Users who have thanked ARCLite Studio for this post:

    HungryChapstick (02-03-2012)

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    6
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thank you very much! So much simpler than all the crazy tactics I was employing.

  • #4
    New Coder
    Join Date
    Sep 2009
    Posts
    73
    Thanks
    5
    Thanked 9 Times in 9 Posts
    Your welcome, note the code is UGLY, in so far as it was written as inline javascript and not externalized by calling a function. So this could be cleaned up and made to look a little better. But in any case the code is the same.

    Best of luck.

  • #5
    Regular Coder
    Join Date
    Feb 2012
    Location
    Nebraska, USA
    Posts
    132
    Thanks
    8
    Thanked 19 Times in 19 Posts
    If you are looking to avoid having to upload massive images (reduce your load time and to avoid artifacting of your images when they scale to fit the background of your website) I would highly suggest something called Supersized.js. It includes the buttons you were looking for to change the background that you can style however you want w/ css, but if you're doing a full-page image this might be something you could consider.

    I employed it in this site if you want to take a look (the buttons are in the lower right
    Last edited by dylanbaumannn; 02-03-2012 at 05:15 PM.


  •  

    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
    •