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?
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!