Background positioning

HTML & CSS
1

hey folks,
just confused over the positioning of background. especially when we talk in x-y axis. how do we get its coordinates? suppose if a image with lot of images to be used on website. how would i know excat cords of the image i want.
thanks in advance

2

Hi,

Are you talking about using “sprite” images (i,.e. multiple images in one image)?

If so then when you first create your sprite image in your paint package you need to note the width and height of all the different images in the sprite and then note all the x,y positions of the images. This should be easy as most simple paint packages have this facility.

Once you know that an image is say 100px x 50px and located at x,y co-ordinates of
(200px, 300px) the you can find that image by using the background property like so:


.sprite1{
    width:100px;
    height:50px;
    background:url(images/sprite.png) no-repeat -200px -300px;
}

As you can see the numbers I have used are negative because in effect we have to drag the image into the top left corner so that we only show the image we want. The image we want is actually 200px from the left of the big image so we drag the background to the left by -200px and that makes the left edge of the image start flush with our element.

We then do the same for the y co-ordinate as the image is 300px from the top of the big image and we therefore need to drag the background back upwards by 300px until the image is flush with the top of our element.

So the basics are find the width and height of your image and then find the x and y positions relative to the top left corner of the main sprite. Then just make the numbers negative and the required image will sit exactly where it needs to be.

Think of the background of the element as a window that you look through. There is more outside the window than you can see and to see someone standing to the right of the window you would need to ask them to walk back towards the window a bit (e.g. minus ten steps).

3

Position using fix or flexible values:

  • Start from left image edge, then from top image edge.
  • Count the distance from left to the start of the part to show (e.g. 75px), then from top down to the top of that part (e.g. 50px). - Pull the image leftwards and upwards by negative values.

background-position: -75px -50px;

In a large area you maybe wish to place a small image somewhere therein. In that case push the image with positive values.

Percent value positions the percentage value’s point of the image into the percentage value’s point of the background area.
Examples using an 1000px wide and 100px high image in a background area of 800px width and 80px height:
0% 0% values aligns left and top edges of the image with the area left and top edges.

50% 0% values positions the horizontal centre of the image in the horizontal centre of the area, and the image top edge aligned with the area top edge.

75% 25% values positions the left-right 750th pixel of the image into the left-right 600ed pixel of the area. Respectively 25px from the image top at 20px from the area top. (That is pulled left by -150px and pulled up by -5px.)

100% 100% values aligns 1000px from left (=right edge) and 100px from top (=bottom edge) image points, with from left 800px (=right edge) and from top 80px (=bottom edge) of the area.

Extreme percentage values are possible too.
0% 110% values pulls the image up leaving a 20px gap at the bottom of the area.

Edit )
20 minutes beaten by the master. :slight_smile: