CSS Sprite проблем

[Vladkata]

Здравейте! Искам да имплементирам това нещо в проекта ми, но имам проблеми. Досега имам следният код:

[css]
html, body{
background-image: url('../images/main.png');
background-repeat: repeat-x, y;
background-color: #333;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
top: 0;
left: 0;
position: absolute;
font-family: segoe ui, calibri, sans-serif, arial;
overflow-x: hidden;
}
[/css]

Като main.png е CSS Sprite изображението - т.е. всички изображения, подредени в едно, с цел да се прави 1 заявка, а не много повече.

Как да задам колко пиксела от ляво и отгоре трябва да вземе от main.png, за да отреже точно това изображение?

Пробвах с:

[css]
background-image: url('../images/main.png') 0 0;
[/css]

т.е. там да напиша колко пиксела трябва да мръдне - 554 от ляво и 10 отгоре за да е точното изображение, но не става.

Който знае как става, ако може да сподели :}.

Благодаря предварително!

 

[gLaVoReZa]

[css]background-position: -554 10;[/css]

 

[tedo96]

Аз го правя така:
[css]
[class^="icon-"] {
display: inline-block;
width: 14px;
height: 14px;
vertical-align: text-top;
background-image: url(../images/glyphicons-halflings.png);
background-position: 14px 14px;
background-repeat: no-repeat;
*margin-right: .3em;
}
.icon-eye-open {
background-position: -96px -120px;
}[/css]

 

[adrian]

[css]html, body{
...
width: 100%;
height: 100%;
...
}[/css]

Проблемът ти се крие точно в тези две неща, които съм оставил.

Като зададеш по 100% широчина и височина създаваш достатъчно място, за да се изкара цялата картинка и css не си прави труда да закрие това, което не искаш (останалите картинки от sprite-a). Единствения начин е да фиксираш или височината или широчината и да си направиш така sprite-a, че да можеш да местиш само по тази страна.

Аз лично не се сещам за начин да може да се направи това, което искаш със sprites

 

[Vladkata]

[css]
background-position: -10px -357px;
[/css]

Погледнах един CSS Sprite Generator и видях как да го направя.

@gLaVoReZa е най-близо. Благодаря на всички!

 

[shterev]

Абе то и ти си близо , но трябва да си обединиш пропъртитата

това нещо:

background-image: url('../images/main.png') 0 0;

става:

background: #333  url('../images/main.png') repeat-x 0 0;

И си задаваш позицията на картинакта