StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POMaking a repeating text background on a website?
text
Body
copied!<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><div style="z-index: -1; position: fixed; font-size: 20pt; color: rgb(148, 148, 148); text-align: justify;">Repeating Text Here Repeating Text Here Repeating Text Here</div> </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>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload