Background-position problem Opcje

[pietrov8]

Witam.

Mam oto taki nurtujący mnie od dłuższego czas problem.

[HTML] pobierz, plaintext 
 
<a href="#">Tekst</a>
 
a{
        display:block;
	width:200px;
	height:30px;
	background:url(obraz.img) top right no-repeat;}
	a:hover{
		background-position:bottom right;}
[HTML] pobierz, plaintext 

I teraz mam obraz.img złożony z dwóch elementów 15px x 15px. Jeden jest dla stanu nieaktywnego a drugi dla :hover. Po zastosowaniu powyższego kodu wyświetla mi się cały obraz zamiast pierwszej części.

Czy jest jakiś sposób na zastosowanie takiego chwytu?? Czy w tym przypadku muszę mieć oba obrazki w osobnych plikach??

Ten post edytował pietrov8 21.07.2011, 19:13:15

[erix]

To ustaw rozmiar dla a taki, jak masz ten stripe, a nie dla całego obrazka. (15 zamiast 30).

[pietrov8]

No ale wtedy będzie ten odnośnik za niski i nie estetyczny po dalszym ostylowaniu...

[erix]

Ale jak to sobie wyobrażasz - masz stripe 15x15, czyli jeden przycisk ze stanem mouseover zajmuje 15x30px. Czyli dwa stany w jednym obrazku. Jak dasz 30px wysokości dla obiektu z tym tłem, to będą oba naraz widoczne, więc z efektu nici.

[pietrov8]

I właśnie o to mi chodziło. Myślałem że jest jakiś sposób na określenie rozmiaru tła Ale skoro nie to musimy korzystać z plików osobno.

[erix]

Nie musisz.

Tylko trzeba zadbać o odpowiednie rozmiary i umiejscowienie grafik w jednym obrazie.

[yta]

background-position: top 30px; np tak możesz ustawić tło