Css Masks

[Mr Jojo]

Greetings


I have a banner in my site legaliza-te.com, where the banner's image is the first line's background picture for resizing purposes in different resolutions.

But i'm looking for a way to get the table's edges rounded. But in this case i cant use that old trick of rounding the picture's edges, or creating more rows and complete the banner picture with round edges, just because the picture is resizeable, see for your self: www.legaliza-te.com

So i want to "hide" the table edges with a mask, is that possible with CSS??

If you dont understand what i meant, here's a picture to explain better, because this can sound really confusing:



That's what i want, a mask that crops/cuts/hides the edges of that table.

That row source code is this one:

<table border="0" bordercolor="#CCCCCC" width="100%" id="table1" style="border-collapse: collapse" cellpadding="0" cellspacing="0">
    <tr>

<td colspan="3" height="180" align="right" background="banner1.jpg" valign="bottom">

<font color="#ffffff" size="1">Existem 265 aplicações e 37 membros no Legaliza-te!</font>

</td>
    </tr> 

Where you see
"<td colspan="3" height="180" align="right" background="banner1.jpg" valign="bottom">"
Is where the banner picture is defined as background.
Look i cant do it other way, because i cant have a picture adapted to a 800x600 resolution and at the same time to a 1280x1024.

So this mask is really the only solution left..

Can you help me?

[markbrown4]

Hello,

The methods you are using to make this site are very outdated now, tables are very hard to work with when you are trying to gain control over the style.
One way you do it with CSS is to position 2 elements at the corners of the container element with absolute positioning and background images.

However I tend to nest elements wherever I need more than one background image though.

<div id="header"> -- This can hold the background
  <div class="inner"> -- This can hold one of the corner images
     <div class="inner"> --This element can contain the other corner image
     Content goes here
     </div>
  </div>
</div>

This would create 3 box level elements in exactly the same spot with the same dimensions - All you need to do is apply the background images with a transparent background-color so you can see the image underneath.

[Mr Jojo]

But i dont have round corner images, and i cant make ones that fit with the banner, because his size is not allways the same, so there'll be a frontier between the corners and the banner itself.

The only solution is that kind of mask, but, i can use Divs insteal of tables.

So with divs how can i do with if i dont have corner images?

[markbrown4]

I have no idea what you mean by "i dont have round corner images"
Just make some