css sprite in wordpress

Question

내가 가리킬 때 다른 이미지를 보여주는 CSS 스프라이트를 만들었습니다.

내 워드 프레스 페이지에서 CSS 스프라이트를 사용하고 있지만 내용을 알 수는 없습니다.

이미지가 페이지 전체에 있습니다.

아이디어가 있으십니까? 이 내 페이지입니다 [http://www.pixeltouch.no/?p=65][1] 이것은 HTML

<ul id="toprow"> 
     <li id="orginal"><a href="#"></a></li> 
     <li id="png"><a href="#"></a></li> 
     <li id="jpgx"><a href="#"></a></li> 
    </ul> 

    <ul id="secondrow"> 
     <li id="bpp2"><a href="#"></a></li> 
    </ul> 

    <ul id="thirdrow"> 
     <li id="bpp1"><a href="#"></a></li> 
    </ul> 

    <ul id="fourthrow"> 
     <li id="bpp05"><a href="#"></a></li> 
    </ul> 

    <ul id="fifthrow"> 
     <li id="bpp025"><a href="#"></a></li> 
    </ul> 

그리고

#uppg1container{ 
margin:10px; 
padding:0; 
} 

/*Första raden*/ 
#toprow { 
position:absolute; 
} 

#toprow li{ 
list-style-type:none; 
position:absolute; 
} 

#toprow li, #toprow a{ 
height:212px; 
display:block; 
} 

#orginal{ 
background:url('lena.png') 0 0; 
left:0; 
width:212px; 
} 

#png{ 
background:url('lena.png') -212px 0; 
left:220px; 
width:212px; 
} 

#png a:hover{ 
background: url('lena.png') 0 0; 
} 

#jpgx{ 
background:url('lena.png') -424px 0; 
left:440px; 
width:212px; 
} 

#jpgx a:hover{ 
background: url('lena.png') 0 0; 
} 

/*Andra raden*/ 
#secondrow{ 
position:absolute; 
} 

#secondrow li{ 
top:220px; 
left:440px; 
list-style-type:none; 
position:absolute; 
} 

#secondrow li, #secondrow a{ 
height:212px; 
display:block; 
} 

#bpp2{ 
background:url('lena.png') -636px 0; 
left:940px; 
width:212px; 
} 

#bpp2 a:hover{ 
background: url('lena.png') 0 0; 
} 

/*Tredje raden*/ 
#thirdrow{ 
position:absolute; 
} 

#thirdrow li{ 
top:440px; 
left:440px; 
list-style-type:none; 
position:absolute; 
} 

#thirdrow li, #thirdrow a{ 
height:212px; 
display:block; 
} 

#bpp1{ 
background:url('lena.png') -848px 0; 
left:940px; 
width:212px; 
} 

#bpp1 a:hover{ 
background: url('lena.png') 0 0; 
} 

/*Fjärde raden*/ 
#fourthrow{ 
position:absolute; 
} 

#fourthrow li{ 
top:660px; 
left:440px; 
list-style-type:none; 
position:absolute; 
} 

#fourthrow li, #fourthrow a{ 
height:212px; 
display:block; 
} 

#bpp05{ 
background:url('lena.png') -1060px 0; 
left:940px; 
width:212px; 
} 

#bpp05 a:hover{ 
background: url('lena.png') 0 0; 
} 

/*Femte raden*/ 
#fifthrow{ 
position:absolute; 
} 

#fifthrow li{ 
position:absolute; 
top:880px; 
left:440px; 
list-style-type:none; 
} 

#fifthrow li, #fifthrow a{ 
height:212px; 
display:block; 
} 

#bpp025{ 
background:url('lena.png') -1272px 0; 
left:940px; 
width:212px; 
} 

#bpp025 a:hover{ 
background: url('lena.png') 0 0; 
} 

Answer 1

바와 같이 말했다 CSS입니다

당신의 HTML은 반 픽셀을 사용 invalid
둘째, 그들은 대신 01,237,019에 a에 :hover을 넣어
을 존재하지 않는 것입니다

#jpegx { 
    background-image:url('http://www.pixeltouch.no/wp-content/uploads/2012/03/lena1.png'); 
    background-position: -328.8px 0; /*-328.8px is invalid use -328 or -329*/ 
} 
#jpegx:hover { 
    background-position: 0 0; 
} 

는 테스트하지,하지만 당신의 방법에 당신을 도움이 될 것입니다
이 시도.