Question

Down below is my code. I do not know how to resize the image as it is in one whole line of code. Do i create a new line of code and use a tag? I do not know what to do. Is there anything wrong?

#centerpicture {
  min-height: 400px;
  background: url("Enderman_wallpaper.jpg") no-repeat;
  text-align: center;
  color: #ffffff;
}

only one eye of the sprite is showing but it should show as one whole face of the sprite.

Answer 1

您可以使用以下属性之一来调整背景图像的大小：

background-size: cover; 
background-size: contain;
background-size: 30%; //using percentages
background-size: 100px 200px // using pixels

试用这些属性，看看最适合您的属性。有关更多信息，请参阅documentation。

要放置背景图片，请使用background-position属性。

代码样式：

您可以在单独的行上声明background属性，或使用shorthand syntax：

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

您可以使用以下方法：

background: url('Enderman_wallpaper.jpg') 0%/30% no-repeat;

How do you resize a background image in css?

1 个答案: