www.webdeveloper.com
Results 1 to 4 of 4

Thread: full screen background images that change

  1. #1
    Join Date
    Nov 2006
    Posts
    64

    full screen background images that change

    I am trying to get a site to use full sized (full covered) background images using CSS3 such as this:

    Code:
    html {
         background: url(images/bg.jpg) no-repeat center center fixed;
         -webkit-background-size: cover;
         -moz-background-size: cover;
         -o-background-size: cover;
         background-size: cover;
    }

    But I then want to change the background with a button on the site. I tried calling a JS function like the one below, but I lose the “full screen” background when I do so (it just aligns in the very middle). Is there some other style.backgroundsize or something that I have to assign in JS at the same time?


    Code:
    function changeBg(imgName) {
            newImage = "url(images/" + imgName + ".jpg)";
            document.getElementById('body').style.background = newImage;
    }

    Let me know if you have any ideas. I am trying to avoid using canned JQuery code if possible.
    Hey, I like potatoes!
    Support the wwf org!

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,125
    Try:
    Code:
     document.getElementById('body').style.backgroundImage = newImage;
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

  3. #3
    Join Date
    Nov 2006
    Posts
    64
    that worked. Thanks.
    Hey, I like potatoes!
    Support the wwf org!

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,125
    Excellent! Just as clarification. When used alone, "background" supports multiple properties. For example, in this "background: url(images/bg.jpg) no-repeat center center fixed;" you're declaring the image, the repetition, and positioning. When you tried to use background again to simply change the image, you weren't declaring the positioning or repetition, so it was being overridden with nothing.
    I'm always up for networking with fellow web professionals. Connect with me on LinkedIn if you like!

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