Table Background Image Displaying in Front of Table - html

Question

After adding a background image to my table, the image is displaying over the table and the contents of the table are hidden. Why is this? HTML and CSS code is below:
.muscles_worked {
background-image: url(images/dumbbell.png);
border: 1px dashed black;
margin: 0 auto;
margin-top: 50px;
}
<table class="muscles_worked">
<caption>Muscles Worked in this Program</caption>
<thead>
<tr>
<th>Part of Body</th>
<th>Day(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Legs</td>
<td>Monday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
<tr>
<td rowspan="3">Core</td>
<td>Monday</td>
</tr>
<tr>
<td>Thursday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
</tbody>
</table>

Answer 1

A better way might be to set the table in a div and set the background on that.
div.muscles_worked {
background-image: url('http://placekitten.com/700/500?image=13');
margin: 0 auto;
margin-top: 50px;
display: inline-block;
}
.muscles_worked > table {
border: 1px dashed black;
}
<div class="muscles_worked">
<table>
<caption>Muscles Worked in this Program</caption>
<thead>
<tr>
<th>Part of Body</th>
<th>Day(s)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Legs</td>
<td>Monday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
<tr>
<td rowspan="3">Core</td>
<td>Monday</td>
</tr>
<tr>
<td>Thursday</td>
</tr>
<tr>
<td>Friday</td>
</tr>
</tbody>
</table>
</div>
Hope it helps. Cheers!