background-size : Firefox에서 이미지 가장자리가 잘리지 않음

Question

이것이 내 HTML이라고 가정 해 보겠습니다.

<div id="spirit_tutorial_reward"> 
    <div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size: contain;"></div> 
    <div id="spirit_tutorial_reward_header">45 Spirit</div> 
    <div id="spirit_tutorial_reward_text">Use Spirit to recruit new Rusherz in the Locker Room!</div> 
</div> 

그리고 이것은 내 스타일이다 :

#spirit_tutorial_reward 
{ 
    position:absolute; 
    top:77px; 
    left:371px; 
    width:45%; 
} 
#spirit_tutorial_reward_icon 
{ 
    background:url(../images/gift_icon_spirit.png) top no-repeat; 
    width:60px; 
    height:60px; 
    position:absolute; 
    top:0px; 
    left:0px; 
    float:left; 
} 
#spirit_tutorial_reward_header 
{ 
    font-size: 15px; 
    font-family:"NFLEndzoneSansBold"; 
    color: #000; 
    position:absolute; 
    left:69px; 
    top:0px; 
    float:left; 
} 

#spirit_tutorial_reward_text 
{ 
    font-size: 15px; 
    font-family:"NFLEndzoneSansBold"; 
    color: #000; 
    position:absolute; 
    left:69px; 
    top:22px; 
    float:left; 
} 

없는 줌 또는 일반 모드에서 이미지가 파이어 폭스 (첨부 이미지 참조)에 떨어져 다진 것으로 보인다하지만 난 내 페이지에서를 확대 할 때 이미지가 좋아지는 것처럼 보입니다 (첨부 된 이미지 참조). Firefox에서만이 문제를 직면하고 있습니다. 누구든지 나를 도울 수 있습니까?

편집 : 당신이 ... 전체 페이지를 덮는 배경에 이미지를 적용하고 배경 크기를 제공하기 위해 배경 이미지를 원하는 경우 FIDDLE demo for the problem

Answer 1

을 apport 또는하여 표시하는 것을 잊지 인 경우 즉

<div id="spirit_tutorial_reward_icon" style="background:url({$MEDIA_IMAGE_DOWNLOAD_PATH}appimages/gift_icon_spirit.png) no-repeat;background-size:59px;"></div> 

나는 그것이 subpixel problem 생각합니다. 이미지가 일부 줌 모드에서 정상적으로 작동하는 이유입니다.

jsFiddle을 편집하여 background-size을 99.9 %로 설정 한 다음 올바르게 작동합니다. 예 here을 볼 수 있습니다.

참고 :;이 내 최근 만남 중 하나에 나를 위해 일한)

Answer 2

이 .. 그것을 을 포함 당신이 시도 할 수 있습니다 :

body { 
background-image: url(your-image.jpg); 
background-repeat: no-repeat; 
background-attachment: fixed; 
background-color: #EEE; 
background-size: cover; 
} 

이 http://www.css3.info/preview/background-size/

Answer 3

내가 그 바이올린에했고, 예상대로 일을 59px로 배경 크기를 설정해보십시오 참조 할 수 있습니다. 이 대답은 helpful.Dont이 답변으로

감사 AB

Answer 4

나는 게으른, 당신이 알고있는 느낌 ... 인라인 스타일을 덮어 !important을 넣어. 당신은`배경 크기 원하는처럼

transform: rotate(0.0001deg);