Steve 25

I have a div that has a background image. The div itself is split into 4 sections, a 2x2 grid, each with an image. For the cases where not all four sections have an image, I want to hide that portion of the background image where there is no image. Below are the 3 cases and the html.

X | 
------
  |

X | X
------
  |

X | X
------
X |

<div class="zzz">
  <div class="zz">
    <table>
      <tr>
        <td>
          ...image...
        </td>
        <td>
          ...image...
        </td>
      </tr>
      <tr>
        <td>
          ...image...
        </td>
        <td>
          ...image...
        </td>
      </tr>
    </table>
  </div>
</div>

I could use a blank image to cover the background.

or

Use a div in with a blank background image to cover the parent div background image.

Any other ideas?

  • Just apply a solid background color to each table cell... ??? Gary Hepting over 9 years ago

1 answer

1
point

If the page is being built by a script on the webserver, have the script apply a class to the td if it doesn't put an image there. (Actually, I presume that if it's a static page built manually, you will have no problem changing the background for the empty cell).

Otherwise you would need a javascript solution which examines the DOM tree.

Answered over 9 years ago by Richard Grevers