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.

Advertisements

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: