0

So I've been working on a site that uses a JavaScript animation for the background of some of the sections. Right now, the section in question is broken down like this:

    <section id="intro">
        <div class="info">
            <div class="container">
                <div class="row">
                    <div class="col-full"><h1>My Name</h1></div>
                </div>
                <div class="row"><div class="col-1-4 centered line"></div></div>
                <div class="row">
                    <div class="col-full"><h4>Video<span class="cool">s</span> and stuff</h4></div>
                </div>
            </div>
        </div>

        <nav id="nav">
            <!-- The content between <span> </span> tags will be hidden on mobile version -->
            <ul class="clearfix">
                <li><a href="#profile">Pro<span>file</span></a></li>
                <li><a href="#skills">Ski<span>lls</span></a></li>
                <li><a href="#experience">Exp<span>erience</span></a></li>
                <li><a href="#education">Edu<span>cation</span></a></li>
                <li><a href="#portfolio">Por<span>tfolio</span></a></li>
                <li><a href="#contact">Con<span>tact</span></a></li>
            </ul>
        </nav>
    </section>

Originally, I wanted to set the background of the entire section using

    dataUrl = canvas.toDataURL();
    document.getElementById("intro")[0].style.background='url('+dataUrl+')'

but that didn't work, so I ended up going with

    dataUrl = canvas.toDataURL();
    document.getElementsByClassName("info")[0].style.background='url('+dataUrl+')'

which did. However, the Nav bar scrolls with the page as you move down, and as soon as the script for scrolling it down kicks in, the background reverts to its default blue color.

My first thought was to simply add

document.getElementById("nav")[0].style.background='url('+dataUrl+')'

but that didn't work. I had some success with

document.getElementByClassName("clearfix")[0].style.background='url('+dataUrl+')'

but only the area immediately surrounding the text used the animated background; the rest was still blue.

So I'm not sure if it's some issue with getElementById, or if you can't use style.background with <section> and <nav>.

Anyone have any thoughts?

0

1 Answer 1

0

I dont think you need the array selector with getElementById so try it on the whole section again and see if that will fix it for you.

So do document.getElementById("intro").style.background='url('+dataUrl+')'

1
  • Well I'll be darned... I still had to do a separate document.getElementById for the nav part, but it worked like a charm. Thanks so much!
    – Adam
    Oct 9, 2013 at 19:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.