Match table to background image with proportionality-CodePudding

Looking for a modern approach to matching a table to a background image, with all content scaling proportionally. Unconcerned with visibility on mobile in this particular project. Wordpress with starter bootstrap theme. Here's a jsfiddle: https://jsfiddle.net/atomikdog/6m5h2wa0/26/

.entry-content {
  background-image: url("https://i.postimg.cc/R0rR2qmp/bg-report-test-1500x2023.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
  min-height: 1700px;
  margin: 0 0 0 0;
  border: 1px dashed yellow;
}
.test {
  padding: 0 0 0 0;
  width: 77%;
  margin-top: 37px;
  border: 1px dashed cyan;
}
.row {
  border: 1px dashed green;
}
table {
  width: 100%;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}
td {
  font-size: 2vw;
  border: 1px solid red;
}
.col53 {
  width: 53%;
}

CodePudding user response：

Your logic works fine expect for the margin on top and that's because you have used a fixed value when it should be a relative one as percentage. Changing the margin of test to margin-top:6%; seems to work better. You can fine tune it by editing the image to fit your needs as well I guess.

CodePudding user response：

Went with an approach incorporating vw. To start, my background image fits into .entry-content at 100%. The .tableContainer is sized at 75% to match the background image table. Used 75vw. Then got the aspect ratio of the image to set the height of the container. Also used a media query to set a max width and height...

.entry-content {
      background-image: url("https://i.postimg.cc/R0rR2qmp/bg-report-test-1500x2023.png");
      /* image aspect ratio is 1.349 */
      background-size: 100% auto;
      background-repeat: no-repeat;
      margin: 0 0 0 0;
      height: calc(100vw*1.349);
      max-width: 1200px; /* from wordpress */
    }
.tableContainer {
      padding: 0 0 0 0;
      width: 75vw;
      height: calc(75vw*1.349);
      margin-top: 6%;
    }
@media only screen and (min-width: 1200px) {
    .container-fluid.test {
        width: 900px;
        height: calc(1200px*1.349)
    }
}

From there I determined the heights of the table rows using either a fixed pixel height for the max size or vw when the window is smaller...

.test tr {
    height: 48.96px
}
@media only screen and (max-width: 1200px) {
    /* When 100 vw = 1200px; 100 vh = 1200px * 1.349 = 1618.8px; */
    /* When 100vw, table is 75vw 75vh */
    /* 48.96/1200 = 0.0408 */
    /* 4.08vw doesn't work so use an eyeball number */
    .test tr { height: 3.75vw; }
    ...

It's maybe a weird solution. Gonna sit with it for a bit before I decide it's an answer answer.