Use of `$$.display().html()`

[stauffenbits]

Hi, I'm a big fan of your project, it's one of the first things I set up when I get a new computer.

I was wondering... How would I create a table with an image for a background. My use case is a chess board 8 queens positions. I figured out the table part using $$.display().html(...), but I can't for the life of me set a custom background for the table.

[n-riesco]

Is something like this what you have in mind?

function buildBoardAndSetPieces(x, y) {
    var left = 40 * x;
    var bottom = 40 * (y + 1);

    return `
<style>
.frame {
    box-sizing: content-box;
    width: 320px;
    height: 320px;
    padding: 40px;
    background: url(https://github.com/n-riesco/ijavascript/raw/master/images/logo-16x16.png);
}

.board {
    width: 320px;
    height: 320px;
    display: grid;
    grid-template-columns:  repeat(8, 40px);
    grid-template-rows: repeat(8, 40px);
    justify-items: stretch;
    align-items: stretch;
}

.white-cell {
    background: white;
}

.black-cell {
    background: black;
}

.piece {
    position: relative;
    width: 32px;
    height: 32px;
    margin: 4px;
    border-radius: 50%;
    background: brown;
}
</style>

<div class="frame">
<div class="board">
    <!-- row 1 -->
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>

    <!-- row 2 -->
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>

    <!-- row 3 -->
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>

    <!-- row 4 -->
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>

    <!-- row 5 -->
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>

    <!-- row 6 -->
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>

    <!-- row 7 -->
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>

    <!-- row 8 -->
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
    <div class="black-cell"></div>
    <div class="white-cell"></div>
</div>

    <!-- sample piece -->
    <div class="piece" style="bottom: ${bottom}px; left: ${left}px;"></div>
</div>
`;

}

var board = $$.display("board");
var counter = 0;

function updateBoard() {
    var x = Math.floor(Math.random() * Math.floor(8));
    var y = Math.floor(Math.random() * Math.floor(8));

    board.html(buildBoardAndSetPieces(x, y));

    counter++;

    if (counter < 10) setTimeout(updateBoard, 1000);
}

updateBoard();

[stauffenbits]

Ah, thank you for taking a look. I wasn't trying to recreate a board from css. I have a chess board that comes in one piece, (and with a border) as well as some beautifully drawn queen crown pictures. I will check out your solution and get back to you. I was trying to make the chess board picture Board.png a background image of the table, or at least the table body, so I wouldn't have to bust out the image editor ;) I got the images to show up in the table using the tag, but was wondering if there was a way to turn off or override the default style of a table. Thank you for this solution... I will look it over. Here is what I have so far

[n-riesco]

@stauffenbits I'm closing this issue. Feel free to reopen.