background image for a content 'box'

[AffiliateDreamer]

Hi,

Using firefox, I was browsing this website that had some nice content boxes, so I wanted to take a look at the background image. In firefox I chose: view background image which shows the image in a new browser window.
The funny thing was the image was all stretched out and distorted.

Does this mean *sometimes* you have to create a skewed image that will somehow look nice when applied in CSS?

if so, this is crazy! hehe

[Xapti]

background images cannot be stretched or compressed in any way using CSS 2.1... you're likely experiencing a bug, or selected "view image" instead, which used a regular img element as the background image.

[AffiliateDreamer]

Ok I think I figured it out, there are using negative positioning to get to the image they want.

.blah{background:url(http://www.example.com/images/generic.gif) -8px -160px no-repeat;}

And the generic.gif image has many images on it, so the -8px -160px i'm guessing is narrowing down to a single image on the file.

This is on a yahoo site, which I guess is for performance reasons...

[swa66]

Ah the CSS sprites!
You create a box of a gives size and position a background image in it.
Using one large images for all (or many) images in order to achieve the most efficient download. It's great for speed in modern setups.

I think one of the easiest examples to see it is ask's home page (the search engine), just do a view background image of e.g. their logo.

But as Xapti said, you can only position it, not scale.

[AffiliateDreamer]

swa66,

cool, so you know what's going on! ahha
(not to say others didn't)

So can you explain to me: -8px -160px
the first value is top/bottom, and the second value is right/left.

But how are they positioning to get the right image to be displayed using negative values?

[swa66]

You basically move the corner of the large background image outside the box of your div to position the part of what you want to show in it.

Let's say you have divided your background image in 100px by 100px sections and you want to show in a given id the third image on the second row. The logo you want to show can be smaller than the 100px by 100px, just keep it in the upper right corner.

#img1, #logo, #img2 {
  background-image: url("http://www.example.com/image.png");
}
#logo {
  background-x-position: -300px;
  background-y-position: -200px;
  width: 50px;
  height: 50px;
}
#img1 {
  /*other position, other size*/
}
#img2 {
  /*other position, other size*/
}

do take a look at ask's homepage, they use it lovely.

[AffiliateDreamer]

Thanks, it makes sense.

Yeah I checked out ask's page, I wonder what the performance benefits really are.

Less # of images loading, and its great for mouseover image swaps also since all the images are pre-loaded.