Padding Images With Background Image

Problems:

We want to display something like this.

The container has an image arrow on the right. The content text length is undetermined.

 

Solution:

We can resort to background to display the image.

/*A padding is put on the right to display the image. The background image is put to the right to fill the padding area. */
p {
    background: url("http://images.apple.com/support/home/images/morearrow.png") no-repeat scroll right center transparent;
    margin: 0;
    padding: 0 9px 0 5px;
}

 

It is even possible to display 2 background images, one on the left and another on the right.

 p{
    margin: 0;
    padding: 0 9px 0 9px;
   background: url("http://images.apple.com/support/home/images/morearrow.png") no-repeat left center, url("http://images.apple.com/support/home/images/morearrow.png") no-repeat  right center;
}

 

Related Patterns:

 

If we need to display the right image X pixels from the right border, we can not do it with this method because background-position can not do this. So, we may have to use:

Padding Images With Absolute Position