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.

  2. #2
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    Try:
    Code:
     document.getElementById('body').style.backgroundImage = newImage;

  3. #3
    Join Date
    Nov 2006
    Posts
    64
    that worked. Thanks.

  4. #4
    Join Date
    Sep 2008
    Location
    Akron, OH
    Posts
    1,143
    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.

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