0

I used an html table to make some cellular automata animations and would like to have those animations as the background of a webpage. Is it possible to make a table the background of the page?

guru har narayan khalsa
  • 3
  • 2

2 Answers2

0

While you can certainly stack elements over your table, you can not use a table in the same way as you would a background image. It would be helpful if you provided an example of what you have now and what you are trying to achieve.

bernk
  • 1,155
  • 2
  • 12
  • 22
0

Yes, it's definitely possible. What you'd want to do is fill the page with the table, by setting its position to absolute, forcing it into the top left corner, and width/height values to 100%:

#your-table {
    position: absolute;

    /* Force table into the top right corner */
    top: 0px;
    left: 0px;

    /* Expand table out into the rest of the window */
    width: 100%;
    height: 100%;
}

If you set pointer-events to "none," most browsers will prevent the cursor from changing when the user mouses over the content. There is also user-select, that can be used to disable text selection highlighting. Thus I suggest adding the following CSS rules to your background table to make it behave more like a background:

/* Disable pointer events */
pointer-events: none;

/* Disable text selection highlighting */
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
 -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
        user-select: none; /* Non-prefixed version, currently
                              supported by Chrome, Opera and Firefox */

Best of luck on your project!

totallyuneekname
  • 2,000
  • 4
  • 16
  • 27