1

My goal for my webpage is to have the background be a random string of 0's and 1's that changes at a set time interval. If you run the following code, you will see that I have accomplished the task. However, I need to resolve 2 problems before moving on:

(1) How do I make the string of 0's and 1's fit exactly in the container in which they reside? Or is that even possible? I did a hack-job of changing the length of the string until it overflowed and hiding the overflow.

(2) How do I construct the rest of my page on top of that background? Was I right to make the background a div? I tried to follow what was done here: Is there a way to use use text as the background with CSS?

<html>
<head>
    <title>my site</title>
    <style type="text/css">
        #mtx_bckgd
        {
            z-index: -1;
            font-family: Courier New;
            height: 1000px;
            width: 1000px;
        }
        #mtx_bckgd > p
        {
            word-wrap: break-word;
            color: #D8D8D8;     
        }
    </style>
    <script type="text/javascript">
        function change_bckgd()
        {
            var bitstr = "";
            for (var i = 0; i < 4000; ++i)
                bitstr += Math.floor(Math.random()*10) % 2 ? "0" : "1";
            document.getElementById("mtx_txt").innerHTML = bitstr;

        }
    </script>


</head>
<body>
    <div id="mtx_bckgd">
        <p id="mtx_txt"></p>
    </div>
    <script type="text/javascript">
        setInterval(change_bckgd, 200);
    </script>
</body>
</html>
Community
  • 1
  • 1
user3443528
  • 47
  • 3

1 Answers1

2

(1) It is certainly possible. Try using vw (view width) (actually, it is the percent of the view width, so 1vw is 1% of the width of your window) and vh (view height) instead of px as your units.

This works perfectly for the width, but for the height, if your content is too large, it will just spill out of the div and appear below anyway. Therefore, we must use overflow:hidden; in our CSS to hide any extra 1's or 0's that spill out below the div.

(2) Instead of nested divs, I created two separate divs. One is your background, and the other is your page content. We then use position:absolute to make them positioned in the same place... left and top now control their location on the page, so I just set both divs to have the same left and top.

PLEASE note that I changed your naming scheme a little. bckgd refers to your 1's and 0's div, and content refers to your page content. So that means I changed your javascript a tiny bit. As always, take the time to investigate and play around with the solution.

<html>
<head>
    <title>my site</title>
    <style type="text/css">
        #mtx_bckgd
        {
            position: absolute;
            left: 0;
            top: 0;
            word-wrap: break-word;
            height: 100vh;
            width: 100vw;
            overflow: hidden;
        }
        #mtx_content
       {
            position: absolute;
            left: 0;
            top: 0;
            word-wrap: break-word;
            color: red;
        }
    </style>
    <script type="text/javascript">
        function change_bckgd()
        {
            var bitstr = "";
            for (var i = 0; i < 9000; ++i)
                bitstr += Math.floor(Math.random()*10) % 2 ? "0" : "1";
            document.getElementById("mtx_bckgd").innerHTML = bitstr;

        }
    </script>


</head>
<body>
    <div id="mtx_bckgd">I am background</div>
    <div id="mtx_content">Hi I am some content!</div>
    <script type="text/javascript">
        setInterval(change_bckgd, 200);
    </script>
</body>
</html>
mareoraft
  • 3,474
  • 4
  • 26
  • 62