Archive for the ‘background-position’ Tag

Putting corners using a single image with CSS

  1. The corner image (26 x 26 pixels)
  2. In the CSS file, it only display 13 x 13 pixels of the background image. The background-position property chooses which portion to be displayed.:

    .box .tl, .box .tr, .box .bl, .box .br
    {background-image:url(Images/corners.gif); background-repeat:no-repeat; width:13px; height:13px}
    .box
    .tl {background-position: left top}
    .box
    .tr {background-position: right top}
    .box
    .bl {background-position: left bottom}
    .box
    .br {background-position: right bottom}

  3. In the web page:

    <table cellpadding=”0″ cellspacing=”0″ class=”box”>
    <
    tr>
    <
    td class=”tl”></td>
    <
    td class=”t”></td>
    <
    td class=”tr”></td>
    </
    tr>
    <
    tr>
    <
    td class=”l”></td>
    <
    td class=”c”>
    <
    asp:ContentPlaceHolder ID=”ContentPlaceHolder1″ runat=”server” />
    </
    td>
    <
    td class=”r”></td>
    </
    tr>
    <
    tr>
    <
    td class=”bl”></td>
    <
    td class=”b”></td>
    <
    td class=”br”></td>
    </
    tr>
    </
    table>

Other thought:
I should have used <div> instead of <td>…Now I know more.