Align the dimensions of the table to match with the background image in a proportional

Seeking a contemporary method to match a table with a background image, ensuring all content scales proportionally. Mobile visibility is not a concern for this specific project. Using Wordpress with a starter bootstrap theme. Check out the code on 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%;
}

Answer №1

Your reasoning is solid, except for the issue with the margin at the top. This occurred because a fixed value was used instead of a relative one like a percentage. Adjusting the margin of test to margin-top:6%; appears to provide better results. You may also want to customize the image to better suit your requirements.

Answer №2

Implemented a unique approach utilizing vw units. Initially, the background image seamlessly integrates into .entry-content at a 100% scale. The .tableContainer is sized at 75% to correspond with the background image table, calculated using 75vw. The height of the container is set based on the aspect ratio of the image. Additionally, a media query is employed to establish a maximum 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)
    }
}

Following that, the heights of the table rows were determined by establishing either fixed pixel heights for maximal size or utilizing vw units 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; }
    ...

This solution may seem unconventional. Will take some time to review before finalizing it as a definitive answer.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disconnect the parent when the child is clicked in CSS

I am struggling to find a solution for this issue. Currently, I have a hover effect where when I click on a submenu li item, the parent li also gets highlighted. You can see the behavior in the image below: https://i.sstatic.net/Ie6Lb.png Is there any w ...

Tips for enabling autoplay for videos in Owl Carousel

I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, ...

Do CSS Stylesheets load asynchronously?

Is there a difference in how stylesheets are loaded via the link tag - asynchronously or synchronously? In my design, I have two stylesheets: mura.css and typography.css. They are loaded within the head section of the page, with typography.css being load ...

flex child moves outside parent when available space shifts

My dilemma involves a flex container (A) containing two or more flex items stacked in a column. The top flex item (B) is a Bootstrap Collapse panel, while the bottom item (C) consists of two horizontal divs (D and E). The problem arises when the collapse p ...

Aligning list items with Bootstrap

I am struggling with aligning Sheet3 and Science vertically left in a list with checkboxes. Currently, Science goes below the checkbox and I need a solution to fix this alignment issue. https://i.sstatic.net/bxoBT.png Any guidance on how to adjust the al ...

Struggling with the Nivo slider not loading properly?

Check out my personal website. I'm having an issue with my Nivo slider not displaying properly - it just keeps loading. Any ideas on why this is happening and how I can fix it? Below is the CSS I am using: #slider { position:relative; width: ...

Is it possible to modify the background color of the firefox address bar according to the type of protocol being used?

Is there a way to customize the background color of the address bar in Firefox according to different protocols? For example, using blue for https, orange for mixed content warning, green for ev-certificate, and red for invalid certificates. ...

The absence of a meta tag in the Wordpress head section

I keep getting an error from Lighthouse saying that I am missing both the viewport meta tag and description meta tag Does not have a <meta name="viewport"> tag with width or initial-scaleNo `<meta name="viewport">` tag found ...

Demystifying Vertical Alignment: Everything You Need to Know

Struggling with vertical alignments has proven to be more complicated than expected. Despite reading numerous resources on stackexchange, a common understanding of the process remains elusive. After gathering some guidelines, it turns out that vertical-al ...

Discovering the HTML element with a particular attribute using jQuery

Is there a way to select an HTML element with a specific attribute, regardless of whether that attribute has a value or not? I have seen similar questions regarding elements with attribute values, but nothing based solely on the existence of the attribute ...

What is the method for altering the color of the webkit-slider-thumb using JavaScript?

I am looking to adjust the color of an input range using JavaScript instead of CSS. Can someone help me with this request? Current CSS Code: input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; background: goldenrod !importa ...

Certain HTML elements on the webpage are not functioning properly when attempting to incorporate a div tag

One of the challenges I'm currently facing is that the links for HOME and ABOUT ME in the header section are not accessible when the 'data' div is added. Strangely, the DOWNLOAD and CONTACT ME links still work fine. This issue seems to be oc ...

Having trouble with Javascript in getting one-page scroll navigation to work?

Hey there, I am working on creating a one-page scroll navigation with some basic javascript to add a smooth animation effect that takes 1 second as it scrolls to the desired section. However, I seem to be experiencing an issue where it's not functioni ...

What is the best approach to managing categorical variables with Flask?

After developing a machine learning model to classify a target variable Y based on predictors x1, x2, x3, and others, I needed to create an HTML form "calculator" for users. The form requires the user to input data for x1, x2, x3, etc., and then displays t ...

Oops! We couldn't locate or access the file you're trying to import: ~bootstrap/scss/bootstrap

Following the steps outlined on getbootstrap.com, I assumed that everything would function smoothly. Unfortunately, that hasn't been the case so far. All seems well until I attempt to load the page, at which point my Express.js app throws a: [[ ...

Enhancing functionality with extra JavaScript tags in next.js

Recently, I delved into programming with react & next.js after previously working with node.js. It didn't take long for me to create my first application, but upon inspecting the page, I noticed an abundance of extra JavaScript code (see image below). ...

Is there a way to mimic disabled input fields?

Is there a way to simulate input being disabled without actually changing the value in the input field, but still have that value sent with POST using a form? <input class="dis" type="text" disabled="disabled" value="111"> <input class="no" type= ...

Having Difficulty with Splicing Arrays in React?

Currently working on learning React and trying to develop my own mini-app. I'm basing it very closely on the project showcased in this video tutorial. I've run into an issue with the comment deletion functionality in my app. Despite searching va ...

In the HTML body, create some breathing room on the side

While working on a virtual restaurant menu with bootstrap, I encountered an issue where there was a persistent little space at the right side of my page that remained unfilled. Despite trying various solutions and inspecting elements, I couldn't ident ...

Conceal a div while revealing the other div

I am currently trying to achieve a unique visual effect. I have three divs named div1, div2, and div3. The objective is for div1 to slide up and disappear when clicked, while div2 simultaneously slides up and becomes visible. Similarly, when div2 is click ...