I'm trying to get this table in front of this image and it just doesn't happen, I know the table isn't that good its just an example!
HTML
<section>
<div class="image-wrapper">
<img src="img/animesea.png" alt="animeb-image" class="picimage">
<table>
<tr>
<td>a</td>
</tr>
</table>
</div>
</section>
Thanks
I would place the image as a background-image like @SVK suggested.
Here is another option. Wrap the img tag and the table tag in separate divs and apply position: absolute on both.
jsFiddle
You could also use z-index and positioning. jsFiddle. It's not clear exactly what you want to achieve, but based on what you've asked I would apply the image as a background like @SVK said.
You can use css style so background image will be adjusted all the time with table size.
There is code :
.tableBckImg
{
background:url(http://www.placehold.it/300x300);
background-repeat:no-repeat;
background-size:100% 100%;
}<table cellspacing="0" cellpadding="0" border="0" class="tableBckImg">
<tr>
<td width="50" align="center">1</td>
<td width="50" align="center">2</td>
<td width="50" align="center">3</td>
</tr>
<tr>
<td width="50" align="center">4</td>
<td width="50" align="center">5</td>
<td width="50" align="center">6</td>
</tr>
</table>You can change number of rows and columns and see how background image expand or shrink, here, in fiddle example
In this example, background image is 300x300 px.
Check it out.You will get some idea.
<!DOCTYPE>
<html>
<style>
.image-wrapper
{
width:650px;
height:488px;
background: url("http://stuffpoint.com/sea-and-beach/image/56782-sea-and-beach-anime-sea-pic.jpg") no-repeat;
background-size:contain;
padding:5px;
margin:auto;
}
table
{
width:650px;
height:150px;
border:2px solid yellow;
color:white;
background-color:rgba(0,0,0,0.5);
text-align:center;
padding:2px;
}
th
{
border:1px solid yellow;
color:white;
font-size:20px;
}
td
{
border:1px solid yellow;
color:white;
}
</style>
<body>
<section>
<div class="image-wrapper">
<table>
<th colspan='3'>Person name and age</th>
<tr>
<td>First name</td>
<td>Last name</td>
<td>Age</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>54</td>
</tr>
<tr>
<td>John</td>
<td>smith</td>
<td>74</td>
</tr>
</table>
</div>
</section>
</body>
</html>