CODEWITHSUNDEEP
cssbackgroundrotation
ჯ ბოლ
ჯ ბოლ

Reputation: 99

CSS background image rotation

I'm making rotating container. Actually I've already made.. but there is the problem: background image is loaded in half (the container is loaded in half).

The code is:

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

Thanks in advance!

Upvotes: 1

Views: 6627

Answers (1)

Joel Worsham
Joel Worsham

Reputation: 1150

The issue is height:100%

I changed that height of the div ".ornament" (via chrome inspector) to the actual height of the background image (1386px) and it works fine.

Upvotes: 2

Related Questions