Elroy Fernandes Elroy Fernandes - 7 months ago 17
HTML Question

overlay a image on top of a table cell

What I am looking to do is have a image on top of the VPS6 cell that is in blue to have a button image here is the link to the image http://imgur.com/EoDB31K , I don't know how to load the image on jsfiddle.



<table class="table">
<tr>
<th>Package</th>
<th>CPU / vCore </th>
<th>Hard Disk (RAID10)</th>
<th>Guaranteed RAM</th>
<th>Premium Bandwidth</th>
<th>Port Speed</th>

</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold;">

VPS1

</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
2.66 GHz<br>
1 vCore
</td>
<td style="vertical-align: middle;">
10GB
</td>
<td style="vertical-align: middle;">
1 GB
</td>
<td style="vertical-align: middle;">
500GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$9.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=74" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd">
VPS2
</td>
<td style="vertical-align: middle;">
2.66 GHz<br>
2 vCore
</td>
<td style="vertical-align: middle;">
20GB
</td>
<td style="vertical-align: middle;">
2GB
</td>
<td style="vertical-align: middle;">
1000GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$19.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=75" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd">
VPS4
</td>
<td style="vertical-align: middle;">
2.66 GHz</br>
2 vCore
</td>
<td style="vertical-align: middle;">
40GB
</td>
<td style="vertical-align: middle;">
4GB
</td >
<td style="vertical-align: middle;">
1000GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$29.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=76" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd; background-image: url('bestSeller.png')">
VPS6
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
2.66 GHz</br>
4 vCore
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
60GB
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
6GB
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
2000GB
</td>
<td style="vertical-align: middle; background-color:#d7f3fd">
100Mbps
</td>
<td style=" background-color:#d7f3fd">
<div class="text-center">
<div class="table-price"><span>$49.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=77" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd">
VPS8
</td>
<td style="vertical-align: middle;">
2.66 GHz</br>
4 vCore
</td>
<td style="vertical-align: middle; ">
80GB
</td>
<td style="vertical-align: middle;">
8GB
</td>
<td style="vertical-align: middle;">
4000GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$59.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=78" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
<tr>
<td style="vertical-align: middle; font-weight: bold; background-color:#d7f3fd">
VPS16
</td>
<td style="vertical-align: middle;">
2.66 GHz</br>
4 vCore
</td>
<td style="vertical-align: middle;">
100GB
</td>
<td style="vertical-align: middle;">
16GB
</td>
<td style="vertical-align: middle;">
6000GB
</td>
<td style="vertical-align: middle;">
100Mbps
</td>
<td>
<div class="text-center">
<div class="table-price"><span>$69.<span>99</span></span>/month</div>
<div class="table-button">
<a href="/billing/cart.php?a=add&pid=79" class="button type-3 size-2">Configure</a>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</div>





https://jsfiddle.net/uyctbrz6/

Answer

You likely didn't see anything because your source image is huge; just setting the background image alone would have just clipped a very tiny portion of the upper right.

<td style="vertical-align: middle; font-weight: bold;
    background-color:#d7f3fd;
    background-image: url('http://i.imgur.com/EoDB31K.png');
    background-size: 40px 40px;
    background-repeat: no-repeat;">
Comments