Image overlay in table


Image replacement by css

Basic image. We start out with the same, fixed html, where we will add style (can be done in CSS of course)
<img src="tiger.jpg">
Image with no width and height. Simple way to dispose of an image, is to set its dimensions to 0x0. Be aware, it is no longer clickable when used in a link
<img src="tiger.jpg" style="width:0px; height: 0px;" >
Image with padding and red background. To preseve some clickable area, we can add a border
<img src="tiger.jpg" style="padding: 50px; background-color:red;" >
Image with padding and reset width and height. Only the padding remains, but that is part of the box, so will be clickable
<img src="tiger.jpg" style="padding: 50px; background-color:red; width:0px; height: 0px;" >
image with padding and reset width and height, background image
<img src="tiger.jpg" style="padding: 150px 200px 0px 0px; background: url('butterfly.jpg'); background-size:auto; width:0px; height: 0px;">
If you liked this piece of CSS, please:

Vertical middle-aligned divs

How it works: the two DIVs are put in a DIV with style = inline. This makes the div behave like a span. Then, the two container DIVs are set to
Vertically aligned DIVS