3

I have a problem, I want to make my login page background image rotated. I have problem with style code because of following code ; 

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;}

And in that i need to insert this code ; 

#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);}
}

I know i cant right now just add the secound code in first code, but i try to combine them but it rotate all the background content not the background image. Can someone please give me a tips how to make it work only on background image ? Right now i need to just option to rotate background image. Will configure the code later to my specifications. Thanx and sorry for bad English!

ketan
  • 19,129
  • 42
  • 60
  • 98
Maaverick
  • 63
  • 1
  • 8
  • show your html please – AleshaOleg Aug 12 '15 at 12:11
  • possible duplicate of [How to rotate the background image in the container?](http://stackoverflow.com/questions/5087420/how-to-rotate-the-background-image-in-the-container) – ben Aug 12 '15 at 12:12
  • Also possible duplicate of http://stackoverflow.com/questions/15170820/rotating-a-background-image-with-css3 – ben Aug 12 '15 at 12:13

1 Answers1

0

You can do like following way:

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;

}

Here is your edited code. Check Fiddle

ketan
  • 19,129
  • 42
  • 60
  • 98