Question

I have a table with a background image using css property background-image. In table I have some images using the <img. Images <img table are above the background image. I would like the background image overwrite the images <img as with the text. Is that possible?

Code Example:

<style>
#content { background-image:url("background-image.jpg"); background-repeat:repeat-y} 
</style>

<table id="content">
<tr>
  <td>Some text.....text.....text
    Image: <img src="quadrado.jpg" />
  </td>
</tr>
</table>

Answer 1

"I would like to display the two images. The background image 
above the quadrado.jpg ! Like a watermark"

Sounds like you want an overlay. You can’t do that with just CSS.
But you can come close by adding styles like so:

#content
{
    opacity:            0.8;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:             alpha(opacity=80);
}
#content img
{
    opacity:            0.8;
    -ms-filter:         "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter:             alpha(opacity=80);
}

.
For more of a true overlay, you’d need to code it into your HTML or use javascript to add it on the fly.

Take a look at this page. It uses javascript to generate overlays for blocks with the class OverlayTheBackground.

There are also jQuery plugins that are supposed to generate overlays.

---

Perhaps post a picture of what you want.

But, it sounds like all you need to do is add this style:

#content img {visibility: hidden;}