Search code examples
htmlcssbackground-image

HTML table as background?


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?


Solution

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