[RESOLVED] using a fragment of a PNG image as background

sneakyimp

I've been looking into skinning the YUI menu widget.

Using Firefox with the Firebug plugin installed, I have surmised that the DIV tag containing my menu has its background set by this CSS descriptor somewhere deep in the YUI hierarchy:

.yui-skin-sam .yuimenubar {
  background:transparent url(../../../../assets/skins/sam/sprite.png) repeat-x scroll 0pt;
  border:1px solid #808080;
  font-size:93%;
  line-height:2;
}

The referenced PNG file has whole bunc of different images inside it. I have attached this file. HOW ON EARTH does that work?? The background descriptor looks pretty traditional but somehow YUI is specifying that a particular region within this file is to be used for display. AFAIK, PNG files are just image files and contain no regions or anchors of any sort.

Any help would be much appreciated.

NogDog

One possibility might be that they change the y coordinate to select different starting top positions within that image. Assuming the element it is being used within has a fixed height, then you would only see that part of the image (sort of a vertically sliding window).

Weedpacket

Indeed; for the lightbulb icon, for example, you'll probably find that the background position is set at something like -1250px.

NogDog wrote:
Assuming the element it is being used within has a fixed height

And even if it doesn't; the dimensions of a background image do not affect the size of the box it's used in. Of course, if the box is too tall, you'll see bits of the background image you shouldn't, so the height would need to be specified somehow anyway (messing with the dimensions of boxes that use this image for their background would reveal stuff).

sneakyimp

Alas! I kinda thought it was something like that. I've been searching the YUI skinning guides for some kind of information about exactly what region of that PNG image goes where but no dice yet.

Thanks for the info.

NogDog

Weedpacket wrote:
Indeed; for the lightbulb icon, for example, you'll probably find that the background position is set at something like -1250px.

And even if it doesn't; the dimensions of a background image do not affect the size of the box it's used in. Of course, if the box is too tall, you'll see bits of the background image you shouldn't, so the height would need to be specified somehow anyway (messing with the dimensions of boxes that use this image for their background would reveal stuff).

That's what I meant: you would probably want a fixed height on the element using the background.

Weedpacket

sneakyimp wrote:
Alas! I kinda thought it was something like that. I've been searching the YUI skinning guides for some kind of information about exactly what region of that PNG image goes where but no dice yet.

Well, you could do a global search of the CSS for mentions of sprite.png and then start looking for the classes in which style classes where it is used (the first one, for example, is presumably used for a menu bar....)

sneakyimp

yep. grep!