CSS Offsets

3 posts Page 1 of 1
Contributors
User avatar
comathi
Coding God
Coding God
Posts: 1242
Joined: Fri Mar 26, 2010 1:59 pm

CSS Offsets
comathi
About a week or so ago, Master M1nd posted a help topic relating to CSS offsets. I myself have had trouble understanding the concept when I was starting with HTML and CSS, and I found not too many online resources give a clear explanation/example of image offsets in CSS.

So for future reference, I decided to write my own tutorial for everyone who'll be struggling in the future!

Obviously, to use image offsets, we must have an image. For the purpose of this tutorial, I'll be using this very accurate picture of Craig:
Image

Note: All dimensions in this tutorial will be in pixels (px).

As you can see, this image is 564 pixels in width and 188 pixels in height. It is, however, made up of three images, each 188 x 188 pixels.

Now, let's assume we have a link, of size 188 x 188 and we want to put an image as its background. In CSS, we would do the following:
Code: Select all
a
{
    background-image: url('image-url');
}
By default, this will place the upper-left corner of our image at the upper-left corner of the link, as shown below:
Image

The green square represents the link. So whatever is inside the green square is what the link's background would be. Since the link's size is the same as the size of one of our three sub-images, one whole sub-image is displayed inside the link.

Notice this graph is a bit different from your regular math graph: the y axis goes downward instead of upward. This is almost always the case when talking about graphics and computers.

So, in this graph, our image is at (0, 0) as the point used is the upper-left corner of our image.

Let's say, for example, that we would like for the blue sub-image to be displayed when we hover over our link. This can be done by adding an offset to our image.

Basically, we want this to happen:
Image

Now that the blue sub-image is in the green square (our link), the upper-left corner of our whole image is at (-188, 0). This means the X offset of our image is -188 pixels, while our Y offset remains at 0.

This is what it translates to in CSS:
Code: Select all
a:hover
{
    background-position: -188px 0;
}
Finally, if we wanted the red sub-image to be displayed, this would happen:
Image

Our image is now at (-376, 0). The X offset is -376 pixels, while the Y offset remains at 0.

CSS:
Code: Select all
background-position: -376px 0;
Although we've only covered horizontal offsets, vertical offsets work in exactly the same way. Shifting our image up by 188 pixels (from our original (0, 0) position) would give us (0, -188), or an X offset of 0 and a Y offset of -188 pixels.

I hope this clears things up a little for you guys. Offsets aren't the easiest thing to understand at first, but once you get the hang of it, they prove to be quite useful cooll;
User avatar
Usman55
VIP - Site Partner
VIP - Site Partner
Posts: 2821
Joined: Thu Dec 24, 2009 7:52 pm

Re: CSS Offsets
Usman55
Even though I never got to learn CSS or HTML, this actually makes sense to me. I'd love more simple tuts like this one.
Image
User avatar
Master M1nd
Top Poster
Top Poster
Posts: 82
Joined: Thu Aug 15, 2013 7:51 pm

Re: CSS Offsets
Master M1nd
Thanks For Sharing this Awesome Tut! cooll;
3 posts Page 1 of 1
Return to “Tutorials”