CSS 배경 이미지 회전

Question

회전 컨테이너를 만들고 있습니다. 사실 저는 이미 만들었지 만 문제가 있습니다 : 배경 이미지가 반으로로드됩니다 (컨테이너가 반으로로드 됨).

코드는 다음과 같습니다 사전에

@keyframes rotate-ornament { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
    } 
    @-webkit-keyframes rotate-ornament { 
    from { 
    -webkit-transform: rotate(0deg); 
    } 
    to { 
    -webkit-transform: rotate(360deg); 
    } 
    } 
    @-moz-keyframes rotate-ornament { 
    from { 
-webkit-transform: rotate(0deg); 
} 
to { 
-webkit-transform: rotate(360deg); 
} 
} 
@-ms-keyframes rotate-ornament { 
from { 
-webkit-transform: rotate(0deg); 
} 
to { 
-webkit-transform: rotate(360deg); 
} 
} 

.ornament { 
position:absolute; 
top:0; 
left:0; 
right:0; 
bottom:0; 
width:100%; 
height:100%; 
display:block; 
z-index: -1; 
} 


.ornament { 
background:transparent url('images/ornament.png') no-repeat; 
background-size: 100%; 
z-index: -1; 
-moz-animation: rotate-ornament 100s linear infinite; 
-ms-animation: rotate-ornament 100s linear infinite; 
-o-animation: rotate-ornament 100s linear infinite; 
-webkit-animation: rotate-ornament 100s linear infinite; 
animation: rotate-ornament 100s linear infinite; 
} 

감사합니다!

Answer 1

문제는 내가 배경 이미지 (1386px)의 실제 높이 (크롬 관리자를 통해) 사업부 ".ornament"의 높이를 변경 height:100%

하고 그것을 잘 작동합니다.