I am working on an HTML document with CSS and have a specific requirement. I need to set a background image in the <thead> element, which should act as an overlay for the other tds. Can this be achieved?
The desired outcome is to have the image only in the thead section while leaving the rest of the tds without any background image.
https://i.sstatic.net/mgNR7.png
This customization is necessary because we use an online software that converts HTML outputs into PDFs, and the thead is the only consistent markup that repeats on every page. Other header repeating solutions do not work for us.
Setting a background image at the tbody level does not accomplish what I need, as it does not repeat when there are page breaks.
Edit: Update with codes and clearify my question
Here is a sample code to illustrate my starting point (Thanks to @NickVU)
<style type="text/css">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 500px;
height: 200px;
color: yellow
}
thead {
background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>In conclusion, the desired output should look similar to the provided image above.
<style type="text/css">
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 500px;
height: 200px;
color: yellow
}
table {
background-image: url("https://www.w3schools.com/css/img_5terre.jpg");
background-repeat: no-repeat;
}
</style>
<table>
<thead>
<tr>
<th>Month</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
</tr>
<tr>
<td>February</td>
</tr>
</tbody>
</table>Please note that the image must be linked specifically to the thead.