Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS/WebKit: Background Images for Table Row

For some reason, when you apply a background image to a tr in Safari and Chrome, it renders it as if the rule applies to every td.

Firefox:

Firefox

(Source: whyprime.com)

Safari:

Safari

(Source: whyprime.com)

I found this article discussing a fix:

Applying a background image to a table row

I was able to get it working in Internet Explorer with spacer GIF images, but I can't figure it out for Safari.

http://www.whyprime.com/temp/table-background.html

like image 848
Jason Keene Avatar asked Dec 24 '09 13:12

Jason Keene


1 Answers

You can use "background-attachment : fixed" to solve this problem.

<table>
  <tr class="bg">
    <td></td>
    <td></td>
  </tr>
</table>

And in CSS

tr.bg {
    background-image : url(../PathToLeftBackground.png) repeat-y 50px 0px;
    background-attachment: fixed;
}

And it works!

like image 197
YellowMart Avatar answered Sep 25 '22 06:09

YellowMart