Backgrounds - again

Part A - Intra-Table Boundaries

image - 
 _____
|#### |
|//// |
|---- |
|```` |
 ŻŻŻŻŻ


1 table row, "table {border-collapse: separate; border-spacing: 2unit;}" - 
                                 (ruler, 1unit intervals)
                                                       \
  |    |_________|    |_________|    |_________|    |   -
  |                                                 |   +
  |     _________      _________      _________     |   -
  |    |         |    |         |    |         |    |   +
  |    |         |    |         |    |         |    |   -
  |    |         |    |         |    |         |    |   +
  |    |         |    |         |    |         |    |   -
  |    |         |    |         |    |         |    |   +
  |     ŻŻŻŻŻŻŻŻŻ      ŻŻŻŻŻŻŻŻŻ      ŻŻŻŻŻŻŻŻŻ     |   -
  |     _________      _________      _________     |   +
  |    |         |    |         |    |         |    |   -


Given
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>

and

  tr {background: url(image) repeat-x;}

What is the rendering?

 a) top of background area at full spacing -------------v

    ###### ###### ###### ###### ###### ###### ###### 
   |    |_________|    |_________|    |_________|    | ___
   |                                                 |  #
   |     _________      _________      _________     |  /
   |    |- ------ |    | ------ -|    |------ --|    |  -
   |    |` `````` |    | `````` `|    |`````` ``|    |  `
   |    |         |    |         |    |         |    |   
   |    |         |    |         |    |         |    |   
   |    |         |    |         |    |         |    |   
   |     ŻŻŻŻŻŻŻŻŻ      ŻŻŻŻŻŻŻŻŻ      ŻŻŻŻŻŻŻŻŻ     |   
   |     _________      _________      _________     |   
   |    |         |    |         |    |         |    | ŻŻŻ


 b) top of background area at 1/2 spacing --------------v

    ###### ###### ###### ###### ###### ###### ###### 
   |    |_________|    |_________|    |_________|    |
   |                                                 | ___
   |     _________      _________      _________     |  #
   |    |/ ////// |    | ////// /|    |////// //|    |  /
   |    |- ------ |    | ------ -|    |------ --|    |  -
   |    |` `````` |    | `````` `|    |`````` ``|    |  `
   |    |         |    |         |    |         |    |   
   |    |         |    |         |    |         |    |   
   |     ŻŻŻŻŻŻŻŻŻ      ŻŻŻŻŻŻŻŻŻ      ŻŻŻŻŻŻŻŻŻ     |   
   |     _________      _________      _________     | ŻŻŻ
   |    |         |    |         |    |         |    |


 c) top of background area at top of 1st cell ----------v

    ###### ###### ###### ###### ###### ###### ###### 
   |    |_________|    |_________|    |_________|    |
   |                                                 |
   |     _________      _________      _________     | ___
   |    |# ###### |    | ###### #|    |###### ##|    |  #
   |    |/ ////// |    | ////// /|    |////// //|    |  /
   |    |- ------ |    | ------ -|    |------ --|    |  -
   |    |` `````` |    | `````` `|    |`````` ``|    |  `
   |    |         |    |         |    |         |    |   
   |     ŻŻŻŻŻŻŻŻŻ      ŻŻŻŻŻŻŻŻŻ      ŻŻŻŻŻŻŻŻŻ     | ŻŻŻ
   |     _________      _________      _________     |
   |    |         |    |         |    |         |    |


 d) none of the above


Similarly, how is the background area defined for columns?


=============================================================

Part B - Cells That Sit the Fence

image_w -           image_b - 
  _______                _______
 |`      |              |#%%%%%%|
 |    `  |              |%%%%#%%|
  ŻŻŻŻŻŻŻ                ŻŻŻŻŻŻŻ

HTML -
 <tr class="a">
    <td>content</td>
    <td rowspan="2">AB</td>
    <td>content</td>
 </tr>
 <tr class="b">
    <td>content</td>
    <td>content</td>
 </tr>

CSS - 
  [rowspan] {
    font-size: x-large
  }

Rendering - 

      ___________________________________
     |         |   ##   ###    |         |
     | content |  #  #  #  #   | content |
     |_________|  ####  ####   |_________|
     |         |  #  #  #   #  |         |
     | content |  #  #  ####   | content |
     |         |               |         |
      ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ

CSS - 

  [rowspan] {
    font-size: x-large
  }
  .a {
    background: url(image_w);
    color: black;
  }
  .b {
    background: url(image_b);
    color: white;
  }

Rendering?

A)
      ___________________________________
     |`      ` |   ##   ###`   |  `      |
     | content |` #  # `#  #  `| content |
     |`______`_|  ####  ####   |__`______|
     |#%%%%%%#%|%%#%##%%#%%##%%|%%#%%%%%%|
     |%content%|#%#%%#%#####%%#|%content%|
     |#%%%%%%#%|%%%%#%%%%%%#%%%|%%#%%%%%%|
      ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ

B)
      ___________________________________
     |`      ` |   ##   ###`   |  `      |
     | content |` #  # `#  #  `| content |
     |`______`_|  ####  ####   |__`______|
     |#%%%%%%#%|` #  #  #   #  |%%#%%%%%%|
     |%content%|  # `#  ####   |%content%|
     |#%%%%%%#%|`      `      `|%%#%%%%%%|
      ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ

c) Neither A nor B

========================================================

Part C - Bleeding Canvas

Seem to have overlooked a consequence of painting backgrounds
in the border area:

image - 
   ________________________________________________
  |########//##////////~~//~~~~~~~~``~~````````  ``|
  |######//##////////~~//~~~~~~~~``~~````````  ``  |
  |########//##////////~~//~~~~~~~~``~~````````  ``|
  |##//##//##////////~~//~~~~~~~~``~~````````  ``  |
  |//##//##//##////////~~//~~~~~~~~``~~````````  ``|
  |##//##//##////////~~//~~~~~~~~``~~````````  ``  |
  |////////////////////~~//~~~~~~~~``~~````````  ``|
  |//////////////////~~//~~~~~~~~``~~````````  ``  |
  |////////////////////~~//~~~~~~~~``~~````````  ``|
  |//~~//~~//~~//~~//~~//~~~~~~~~``~~````````  ``  |
  |~~//~~//~~//~~//~~//~~//~~~~~~~~``~~````````  ``|
  |//~~//~~//~~//~~//~~//~~~~~~~~``~~````````  ``  |
  |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~````````  ``|
  |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~````````  ``  |
  |~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~````````  ``|
  |~~``~~``~~``~~``~~``~~``~~``~~``~~````````  ``  |
  |``~~``~~``~~``~~``~~``~~``~~``~~``~~````````  ``|
  |~~``~~``~~``~~``~~``~~``~~``~~``~~````````  ``  |
  |````````````````````````````````````````````  ``|
  |``````````````````````````````````````````  ``  |
  |````````````````````````````````````````````  ``|
  |``  ``  ``  ``  ``  ``  ``  ``  ``  ``  ``  ``  |
  |  ``  ``  ``  ``  ``  ``  ``  ``  ``  ``  ``  ``|  
  |``  ``  ``  ``  ``  ``  ``  ``  ``  ``  ``  ``  |
   ŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻŻ

Block, "border: 2units dotted;" - 

  [][]    [][]    [][]    [][]    [][]    [][]    [][]
  [][]    [][]    [][]    [][]    [][]    [][]    [][]


  [][]                                            [][]
  [][]                                            [][]


  [][]                                            [][]
  [][]                                            [][]


  [][]                                            [][]
  [][]                                            [][]


  [][]    [][]    [][]    [][]    [][]    [][]    [][]
  [][]    [][]    [][]    [][]    [][]    [][]    [][]

Block, "border: 2units dotted; background: url(image) no-repeat;" - 

  Rendering with Errata (including border area) - 

     [][]    [][]    [][]    [][]    [][]    [][]    [][]
     [][]    [][]    [][]    [][]    [][]    [][]    [][]
         ########//##////////~~//~~~~~~~~``~~````````  ``
         ######//##////////~~//~~~~~~~~``~~````````  ``  
     [][]########//##////////~~//~~~~~~~~``~~````````[][]
     [][]##//##//##////////~~//~~~~~~~~``~~````````  [][]
         //##//##//##////////~~//~~~~~~~~``~~````````  ``
         ##//##//##////////~~//~~~~~~~~``~~````````  ``  
     [][]////////////////////~~//~~~~~~~~``~~````````[][]
     [][]//////////////////~~//~~~~~~~~``~~````````  [][]
         ////////////////////~~//~~~~~~~~``~~````````  ``
         //~~//~~//~~//~~//~~//~~~~~~~~``~~````````  ``  
     [][]~~//~~//~~//~~//~~//~~//~~~~~~~~``~~````````[][]
     [][]//~~//~~//~~//~~//~~//~~~~~~~~``~~````````  [][]
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~````````  ``
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~````````  ``  
     [][]~~~~[][]~~~~[][]~~~~[][]~~~~[][]``~~[][]````[][]
     [][]~~``[][]~~``[][]~~``[][]~~``[][]~~``[][]``  [][]

  Rendering without Errata (assumed excluding border area) - 

     [][]    [][]    [][]    [][]    [][]    [][]    [][]
     [][]    [][]    [][]    [][]    [][]    [][]    [][]
         ########//##////////~~//~~~~~~~~``~~````````
         ######//##////////~~//~~~~~~~~``~~````````  
     [][]########//##////////~~//~~~~~~~~``~~````````[][]
     [][]##//##//##////////~~//~~~~~~~~``~~````````  [][]
         //##//##//##////////~~//~~~~~~~~``~~````````
         ##//##//##////////~~//~~~~~~~~``~~````````  
     [][]////////////////////~~//~~~~~~~~``~~````````[][]
     [][]//////////////////~~//~~~~~~~~``~~````````  [][]
         ////////////////////~~//~~~~~~~~``~~````````
         //~~//~~//~~//~~//~~//~~~~~~~~``~~````````  
     [][]~~//~~//~~//~~//~~//~~//~~~~~~~~``~~````````[][]
     [][]//~~//~~//~~//~~//~~//~~~~~~~~``~~````````  [][]
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~````````
         ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~``~~````````  
     [][]    [][]    [][]    [][]    [][]    [][]    [][]
     [][]    [][]    [][]    [][]    [][]    [][]    [][]

Quite frankly, I prefer the second rendering to the first. It doesn't look
so messy, as if the image were bleeding through two edges of the box.

CSS Spec:

  http://www.w3.org/TR/REC-CSS2/tables.html#table-layers
  http://www.w3.org/TR/REC-CSS2/colors.html#background-properties
  http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html

Regards,
fantasai

Received on Monday, 26 November 2001 20:56:58 UTC