title: Making a repeating text background on a website?
body: <p>I've been requested to put a sequence of text repeating as the background of a website.</p>
  
  <p>It will be just a slight shade lighter then the background color, similar to physical company stationary with the name, slogan, whatever repeating covering the paper.</p>
  
  <p>I mocked it up simply enough by putting the following div onto the page</p>
  
  <pre><code>&lt;div style="z-index: -1; position: fixed; font-size: 20pt; color: rgb(148, 148, 148); 
  text-align: justify;"&gt;Repeating Text Here Repeating Text Here Repeating Text Here&lt;/div&gt;
  </code></pre>
  
  <p>I like this solution in general terms as using a repeating image seems like a big headache (trying to get a seamless repetition) and the text based seems like better bandwidth wise.</p>
  
  <p>However, to get enough text onto the page to cover browser windows maximized at a high resolution, I am manually repeating the text in the html many times over.</p>
  
  <p>I'm wondering if there is a more elegant solution to this, something CSS based maybe I could say to repeat X times.</p>
  
  <p>I know I could repeat the text X times into html server side with PHP, ASP.Net, etc but I am looking for something where the html source output doesn't need that text repeated like that.</p>
  
  <p>I could do it JavaScript based, but then users without JavaScript won't see it.  An advantage I could see with the JavaScript would be bots like Google's won't see the repeating text and think it is an attempt to boost keyword hits.</p>
  
  <p><strong>Comment Responses:</strong><br>
  The text is static, essentially it is a company slogan.  Picture if instead of SO having a pure white background it was white with a soft gray "Making the Web a Better Place" over and over again.</p>
  
  <p>The issues with doing this image based I see is lack of text justify and wrap for variance of browser window width.</p>
  
  <p>It would sometimes need to go:</p>
  
  <blockquote>
    <p>Making the Web a Better Place Making the Web a Better Place Making the
    Web   a Better Place Making the Web a Better Place Making the Web a
    Better Place</p>
  </blockquote>
  
  <p>Then if you reduce the browser width it'd need to be:</p>
  
  <blockquote>
    <p>Making the Web a Better Place  Making  the    Web a Better Place
    Making the Web a Better    Place Making the Web a Better Place Making</p>
  </blockquote>
  
  <p>If you are doing that with a tiled image, you'd end up with:</p>
  
  <blockquote>
    <p>Making the Web a Better Place Making the Web
    Making the Web a Better Place Making the Web
    Making the Web a Better Place Making the Web</p>
  </blockquote>