How are new lines made with text as background?

Question

Referencing this question: Is there a way to use use text as the background with CSS?

I was able to make one line of text appear behind another line of text. What I am having trouble figuring out is how to make multiple lines of background text. Here's the pattern i want to use: http://nanocluster.umeche.maine.edu/scope/bgScope

So inserting it directly didn't work, everything was on one line. OK, I thought, I'll use a <pre></pre> set of tags, but that made the background text invisible. So then I tried taking out the pre tags, and putting in <br> on each new line. But it still nothing. Next I tried putting

font-family: Courier;
font-size: 18px;
color:#167c11;

into the style sheet, but, the text in the background is still invisible.

Have a look at the page where i am trying to get newlines into the text as a background. http://nanocluster.umeche.maine.edu/scope/

Can anyone see what I am doing wrong? How can I get multiple lines of text as a background in CSS?

You might consider [using a canvas to draw the grid](http://stackoverflow.com/questions/20642485/setting-canvas-to-background-javascript). — 001, Jul 16 '14 at 13:43

Jacob G · Accepted Answer · 2014-07-16T17:53:30.357

You use absolute positioning and z-index to add the background effect.

body{
    background:black;
    color:green;

}
#background{
    position:absolute;
    top:0px;
    left:0px;
    z-index:-1;
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:default;
}
#content{
    color:red;
    font-family: Courier;
}

The rules:

-webkit-user-select: none; /* Chrome/Safari */        
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+ */
        /* Rules below not implemented in browsers yet */
        -o-user-select: none;
        user-select: none;
        cursor:default;

give it a background effect making it so the text cannot be selected and the cursor is default instead of text. The html is very simple:

<div id="background">
<pre>

    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    |         |         |         |         |         |         |         |         |         |         |
    +---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
_____________________________________________________________________________________________________
t1:288 ms  t2:480 ms    Display Mode: Normal: Peak Detect    Vectors: OFF       Grid = FULL


</pre>
        </div>
        <div id="content">
            I am content and I am above the grid!
        </div>

Check out this Demo

score 1 · Answer 2 · answered Jul 16 '14 at 14:21

Are you looking for something like this ?

http://jsfiddle.net/adriantombu/LNCXB/

I made some changes to your html and css, you can see what it does on the jsfiddel above.

body {
    background-color:#000000;
    font-family: Courier;
    font-size: 18px;
    color:#167c11;    
}

#container {
    position: relative;
    color:#FF0011;
}

#background {

    color:#167c11;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
#background pre {
    margin: 0; padding: 0
}

#content {

    position: absolute;
    top: 0;
    left: 0;
}

How are new lines made with text as background?

2 Answers2