Анимированная информация о ротации

Question

У меня проблема, я хочу, чтобы мое фоновое изображение моей учетной записи поворачивалось. У меня проблема с кодом стиля из-за следующего кода;

body{font-family:Arial, Helvetica, sans-serif;font-size:13px;background:#020307 url(/media/images/bg.jpg) no-repeat ;background-position:top center ;color:#fff;} 

И в этом я должен вставить этот код;

#myDIV { 
    margin: auto; 
    border: 1px solid black; 
    width: 200px; 
    height: 100px; 
    background-color: coral; 
    color: white; 
    -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ 
    animation: mymove 5s infinite; 
} 

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove { 
    50% {-webkit-transform: rotate(180deg);} 
} 

/* Standard syntax */ 
@keyframes mymove { 
    50% {transform: rotate(180deg);} 
} 

Я знаю, что я не могу сейчас просто добавить secound код первого кода, но я стараюсь, чтобы объединить их, но вращаются все фоновое содержание не фоновое изображение. Может кто-нибудь, пожалуйста, дайте мне советы, как заставить его работать только на фоновом изображении? Прямо сейчас мне нужно просто выбрать поворот фонового изображения. Построит код позже в моих спецификациях. Thanx и извините за плохой английский!

Answer 1

Вы можете сделать, как следующим образом:

body{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:13px; 
    position: relative; 
    height:500px; 
    width:100%; 
} 

body::before { 
    animation: 5s ease 0s normal none infinite running mymove; 
    background: #020307 url(/media/images/bg.jpg) no-repeat scroll center top; 
    color: #fff; 
    content: ""; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
    z-index: -9999; 
} 

#myDIV { 
    margin: auto; 
    border: 1px solid black; 
    width: 200px; 
    height: 100px; 
    background-color: coral; 
    color: white; 

} 

Вот отредактированный код. Проверьте Fiddle