画像がズームアップで表示されます。

Question

前提・実現したいこと

回転寿司のプログラミングを作成しています。
初心者の為、まずはネット検索したコードをもとにお寿司の画像を貼り付け完成させたいと思い
background-image: url(image/○○.jpg);　を下記の場所に貼り付けましたが画像サイズがあわず…
画像の縮小、拡大のコードをいれてみましたがエラーになってしまいました。

画像の反映の仕方をおしえていただきたいです。

該当のソースコード

https://cartman0.hatenablog.com/entry/2015/05/07/232831
こちらのサイトです。　とりあえずtopのみに画像コードをいれました。
画像表示自体はできています。

body {
  width: 400px;
  margin: 100px auto;
}

.circle { 
  width: 300px;
  height: 300px;
  border: 1px solid #333;
  border-radius: 50%;
  position: relative;
}

.content {
  width: 50%; 
  height: 50%;
  position: absolute;
  left: 25%;
  top: 25%;
  border: 1px solid #333;
}

/* top */
.top { 
 　background-image:url(image/○○.jpg):width="100"height="60"; 
  animation: rotate_top 60s linear infinite;
}
@keyframes rotate_top { 
  0% { 
   transform: rotate(0deg) translateY(-100%) rotate(0deg);
  }
    100% {  
    transform: rotate(360deg) translateY(-100%) rotate(-360deg);
  }
}

/* right */
.right { 
  animation: rotate_right 60s linear infinite;
}
@keyframes rotate_right { 
  0% { 
   transform: rotate(0deg) translateX(100%) rotate(0deg);
  }
    100% {  
    transform: rotate(360deg) translateX(100%) rotate(-360deg);
  }
}

/* bottom */
.bottom { 
  animation: rotate_bottom 60s linear infinite;
}
@keyframes rotate_bottom { 
  0% { 
   transform: rotate(0deg) translateY(100%) rotate(0deg);
  }
    100% {  
    transform: rotate(360deg) translateY(100%) rotate(-360deg);
  }
}

/* left */
.left { 
  animation: rotate_left 60s linear infinite;
}
@keyframes rotate_left { 
  0% { 
   transform: rotate(0deg) translateX(-100%) rotate(0deg);
  }
    100% {  
    transform: rotate(360deg) translateX(-100%) rotate(-360deg);
  }
}

<div class="circle">
  <div class="content top">top</div>
  <div class="content right">right</div>
  <div class="content bottom">bottom</div>
  <div class="content left">left</div>
</div>

Resources

試したいこと

top,right,bottom,left の四つにそれぞれ違う画像を入れたいと思ってます。

補足情報（FW/ツールのバージョンなど）

Bracketsを使用しています。

画像の反映や大きさ設定、コードを入れる位置など教えていただけたら幸いです。
よろしくお願い致します。

Comments

[kyoya0819]

多重投稿です。
削除依頼を提出してください。

[kei344]

https://teratail.com/questions/233350 この質問と内容が同じです。teratailは質問内容の編集ができるので、変更がある場合は新しい質問をするのではなく編集してください。また、こちらの質問を削除されるよう運営に連絡されることをお勧めします。 https://teratail.com/help#delete-question https://teratail.com/contact/input

[退会済みユーザー]

asuchi0819 しつこい

[kyoya0819]

多重投稿とは一回しか言っておりませんし、
返信の定義にも当てはまりません。

いったいどのような件で「しつこい」とおっしゃっているのでしょうか？

Answer 1

こうかな？

background: center/contain no-repeat url(○○.jpg);