I'm struggling with the height of a table cell that contains a background image. The width of the cell is set to be 100% of the page's width, and the image's background-size is also set to 100%. This setup makes the background image scale to match the width of the page.
However, I want the height of the cell to match the scaled image's height, resulting in a cell with both matching dimensions while maintaining the aspect ratio of the scaled image. How can this be achieved using CSS?
Edit:
I am trying to replicate the primary image on . I aim to overlay text on top of this image.
Below is the relevant HTML and CSS:
td.content
{
vertical-align: top;
text-align: left;
font-family: "Arial";
font-style: normal;
font-size: 0.9em;
background: url('/pages/home/intro_image.jpg');
background-size: 100%;
width: 100%;
}
table.content_document
{
width: 50%;
padding: 0px;
margin-top: 2em;
border: solid thin grey;
border-radius: 0.5em;
box-shadow: black 0.5em 0.5em 0.3em;
background-color: white;
padding: 1em;
position: relative;
}
td.content_text_cell
{
overflow: scroll;
}
<table>
<tr class="content">
<td class="content" colspan="2">
<table class="content_document">
<tr>
<td class="content_text_cell">
<p>
This is a simple test
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>