How are new lines made with text as background? - html

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?

Answer 1

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

Answer 2

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;
}