title: Dynamically repeat/tile div and child(s)?
body: <p>I've been doing some searching on here and Google and I can't seem to find an answer that quite fits what I'm trying to do. I have a single div with some text in it that does a fade effect by transitioning to a different background image on mouse hover. What I want to do is to tile/repeat that same div dynamically so it fills the entire body (or parent div). Kind of like using background-repeat:repeat but with a div instead of a background image. I like to see what kind of cool visual effects I can achieve with elements across the entire page fading in and out as the mouse moves over them.</p>
  
  <p>Of course I could just copy and paste the same div in the code a bunch of times but there must be a better solution. I'm thinking javascript is needed, but the only things I've been able to find about cloning divs look to be a bit over my head and I'm wondering if there is a more simple solution.</p>
  
  <p>The CSS and HTML that I'm using as an example is from menu links on a site I'm working on. It may not be the best example but I'm a bit new to CSS. Basically I want to tile the below div across an entire page.</p>
  
  <p>Here is the css:</p>
  
  <pre><code>#fadediv {
      background-image:url(images/buttonback.png);
      transition: background-image 0.5s linear;
      -moz-transition: background-image 0.5s linear;
      -webkit-transition: background-image 0.5s linear;
  }
  
  #fadediv:hover {
      background-image:url(images/buttonback2.jpg);
  }
  
  .fadedivtext {
      display:block;
      width:320px;
      height:138px;
      float:left;
      font-size:30px;
      color:#FFF;
      text-align:center;
      line-height:138px;
  }
  </code></pre>
  
  <p>And the HTML snippet:</p>
  
  <pre><code>&lt;div id="fadediv" class="fadedivtext"&gt;about me&lt;/div&gt;
  </code></pre>
  
  <p>EDIT: Looks like there's a PHP example <a href="https://stackoverflow.com/questions/9761069/how-can-i-make-a-div-that-vertically-repeats?rq=1">here</a> that could work, in addition to the javascript example given below.</p>