Question

I have a div (with a background image) and the image’s width is 40px.

Now when I change the width to 20px it trims the image’s right side. Is there any way to make it trim the left side instead?

Explanation : I have a square (4 images for corners and 1 image for upper and lower strip (the strip images are just 1×20 with repeat-x)). If I go to the welcome page which only contains the word “Welcome!”, that the square’s size will decrease. If I go to the ‘My Character’ page, the square’s size will increase.

Meaning the square will always fit the content.

 <table align="center">
    <tr>
        <td>
            <div id="dynamic" class="DynamicWidth" >
                <div class="ContentTL ContentCorners">
                </div>
                <asp:Panel ID="ContentTC" runat="server" CssClass="ContentTC ContentStrips">
                </asp:Panel>
                <div class="ContentTR ContentCorners">
                </div>
                <div class="ContentDiv">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                    </asp:ContentPlaceHolder>
                </div>
                <div class="ContentBL ContentCorners">
                </div>
                <asp:Panel ID="ContentBC" CssClass="ContentBC ContentStrips" runat="server">
                </asp:Panel>
                <div class="ContentBR ContentCorners">
                </div>
            </div>
        </td>
    </tr>
</table>

Problem : Now, for the square’s size to decrease and increase I can’t use the ‘px’ unit since in the welcome screen, the whole square’s width (2 corners and strip) might be 200px and in other pages, it’s gonna be 1000px.

So I decided to use ‘%’ – both corner with same % of width and the strip’s width will complete to 100% (Ex: corners are 3% each, strip will be 96%)

It’s all well but there’s a problem – my corner image looks like this – bottom right() and bottom left(). if the page is really small – my left corner is ok but my right corner losses its roundness – almost looks like a square. (3% of 200px is really small and instead of trimming the left side of the picture it trims the right one which results in loss of the round size)

Solution : For this thing to work I asked you for a way to trim the image from the other side but than I thought of another solution : I took bottom left image () and simply flipped it (-moz-transform: scaleX(-1); I also have ones for opera,safari and IE) and the the width changes while triming it from the other side.

BTW : Now, I only need 2 images for corners instead of 4

Answer 1

give it background-position: -20px 0;