Geek Answers Handbook

CSS: displaying one specific icon from an image file

How to set CSS property background-imageto load only one icon from a larger image?

For example, the jQuery user interface customizes its Dialog widget using the following PNG image file: http://dev.jqueryui.com/browser/trunk/themes/base/images/ui-icons_2e83ff_256x240.png , which encodes a bunch of icons in it. Then, as shown at http://docs.jquery.com/UI/Dialog , the lower right size handler loads the most recent icon from PNG.

Using Firebug I can see a bunch of CSS properties, such as ui-icon ui-icon-gripsmall-diagonal-se ui-icon-grip-diagonal-sethose related to url(ui-icons.xx.png), but nothing to do with choosing a specific icon.

+5
source share
3 answers

This is actually a CSS sprite method.

CSS Sprites: What It Is, Why Theyre Cool, and How to Use Them

using

background-position

property

If a background image has been specified, this property indicates its original position. If only one value is specified, the second value is assumed to be the "center". If at least one value is not a keyword, then the first value is a horizontal position and the second is a vertical position. Negative and values ​​are valid.

For example:

body { background: url("banner.jpeg") right top }    /* 100%   0% */
body { background: url("banner.jpeg") top center }   /*  50%   0% */
body { background: url("banner.jpeg") center }       /*  50%  50% */
body { background: url("banner.jpeg") bottom }       /*  50% 100% */

background CSS . : , , , -, -.

.PosBG { 
  background-image: url("logo.png");
  background-attachment: fixed;
  background-position: 100% 100%;
  background-repeat: no-repeat;
}
+11

Under the covers ...

, , , background-position , .

A List Apart, .

+11

- :

background-image: url('yourimage.png');
background-repeat: no-repeat;
background-position: 25px 0px;

. http://www.w3schools.com/css/pr_background-position.asp

+6

More articles:


All Articles