1

I have a span tag that I'm adding a background image to. I know there are many ways of doing this but wondered if there is a way to make the background image which is a small pdf icon move to the right of the text instead of the left of it.

<span class='pdf'><a href="#">download pdf link</a></span>

 .pdf{
  background: url(img/sprite.png) no-repeat left bottom;
  display:inline-block;
  padding-top:10px;
  padding-left:26px;

There are a few more sprites in the sprite image and this one is set to be position to the bottom.

Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
Chapsterj
  • 6,483
  • 20
  • 70
  • 124

2 Answers2

4

How about changing left to right?

background: url(img/sprite.png) no-repeat right bottom;
padding-right:26px;
jeroen
  • 91,079
  • 21
  • 114
  • 132
  • +1 Works perfectly in Chrome. See fiddle. http://jsfiddle.net/jasongennaro/6MPu5/ – Jason Gennaro Jul 19 '11 at 16:58
  • Perfect. I thought with background: you were referring to the to the position of the image in the sprite, and not the placement of it in the element. I also thought it was always horizontal# then vertical#. Can you explain this a little. – Chapsterj Jul 19 '11 at 17:06
  • @Chapsterj What do yo mean, I just changed `left` with `right` in your code so it´s still horizontal and then vertical? – jeroen Jul 19 '11 at 17:11
  • So the way I had it it was right vertically and bottom horizontally. The way I'm looking at this is I have a sprite 400px in height with a lot of small icons. Then its 20px wide. Would that not be 0 200. When I do that to my bg image it doesn't show. – Chapsterj Jul 19 '11 at 17:15
  • @Chapsterj if you use 0 200 you position your background image on the left side (0), 200 pixels down. With `no-repeat` and a line that's less than 40px in height, it will not show anything. – jeroen Jul 19 '11 at 17:19
  • I'm confused. So the right bottom at the end of a background property is just to set the position of the sprite in the span tag itself. So what part of the code clips the other images in the sprite out. I presumed that's what the background: property left right did. Which is number form would be for my sprite 0 left and 200px down to the bottom of the sprite for the clipping – Chapsterj Jul 19 '11 at 17:24
  • @Chapsterj For lack of an image, picture an `L`, that's how you positioned your 20x400 image originally, as the vertical bar of the `L` (the horizontal bar is your `span` tag). The upper part of the `L` doesn´t show because it´s outside of the `span`. Using `right` you have kind of mirrored the image, the bottom of your image is aligned to the bottom of the `span` and the right side to the right side of the `span`. – jeroen Jul 19 '11 at 17:27
  • that's how you positioned your 20x400 image originally, as the vertical bar of the L (the horizontal bar is your span tag). ? – Chapsterj Jul 19 '11 at 17:32
  • Ok I'm understanding that the values at the end of a position property is the area you want to clip. But wouldn't this be left, bottom as my 20px wide sprite has the image all the way over to the left side and all the way down at the bottom. to the right or this sprite is about 8px of transparency. Now what I don't get is how the image gets positioned inside the span tag all the way to the right when there is only 8pixles of transparency to the right. – Chapsterj Jul 19 '11 at 18:30
0

There are two ways by which you can position the background image.

by left/right attributes

  For example:
  background: url(img/sprite.png) no-repeat right bottom;
  // "right" instead of "left"

See the Demo: http://jsfiddle.net/rathoreahsan/sDajV/5/

or

by percentage attributes

  For example:
  background: url(img/sprite.png) no-repeat 188% 93%;

See the Demo: http://jsfiddle.net/rathoreahsan/sDajV/4/

Ahsan Rathod
  • 5,465
  • 2
  • 21
  • 25