What you need to add to the image was on the left side? Additional line needed. (Do not say that 0 0 is already worth it, an extra line!)

a.rollover { background: url('lglogo1.png') 0 0 no-repeat; display: inline-block; vertical-align: middle; width: 89px; height: 29px; padding: 0px; } a.rollover:hover { background: url('lglogo2.png') 0 0 no-repeat; }

Something like <p align="left"></p>

In general, I tried to do it my own way and moved the background to the left - like this:

 a.rollover { background: url('lglogo1.png') 0 0 no-repeat; display: inline-block; vertical-align: middle; width: 89px; height: 29px; padding-left: 176px; }

But now I ran into such a problem: because of the padding-left: 176px; To the right of the background image, a lot of clickable space was formed as a continuation of the image-link. How can this be fixed?

Everything! The question is closed. I figured it out myself. It was a margin-right: 176px;

    2 answers 2

     background: url('lglogo1.png') left center no-repeat;

      Oh ... I do not think that if you produce topics, the answer will appear from nowhere. Understand that you do not have "images" as such. You have an image as a background. Therefore, if the positioning of the background does not suit you, then you need to take some action with the block in which this background is located. If it is necessary that the text "wrap around" this block on the right side, then try float: left; i.e. So:

       a.rollover { float: left; background: url('lglogo1.png') 0 0 no-repeat; display: inline-block; vertical-align: middle; width: 89px; height: 29px; padding: 0px; }