要保持图像按钮的位置和正确的大小，并对背景图像做出响应，你可以使用CSS中的相对单位和媒体查询来实现。

首先，确保图像按钮的外部容器具有适当的大小，并使用相对单位来定义其宽度和高度。例如，你可以使用百分比来设置容器的宽度和高度，以便它可以根据其父元素的大小进行调整。

HTML代码示例：

CSS代码示例：

.button-container {
  width: 50%; /* 容器宽度为父元素宽度的50% */
  height: auto; /* 高度自动调整根据内容 */
  position: relative; /* 设置相对定位，以便内部元素可以相对于容器定位 */
}

.image-button {
  width: 100%; /* 按钮宽度为容器宽度的100% */
  height: auto; /* 高度自动调整根据内容 */
  background-image: url("image.jpg");
  background-size: cover; /* 背景图像覆盖整个按钮 */
  background-position: center; /* 背景图像在按钮中居中 */
}

接下来，你可以使用媒体查询来根据不同的屏幕尺寸和设备类型调整图像按钮的大小和位置。媒体查询允许你根据媒体特性（如屏幕宽度、设备类型等）应用不同的CSS规则。

例如，你可以在媒体查询中定义一个新的图像按钮宽度和高度，并使用绝对单位（如像素）来确保在特定的屏幕尺寸下按钮的大小保持不变。

CSS代码示例：

@media screen and (max-width: 768px) {
  .image-button {
    width: 200px; /* 在屏幕宽度小于768px时，按钮宽度为200px */
    height: 200px; /* 在屏幕宽度小于768px时，按钮高度为200px */
  }
}

@media screen and (max-width: 480px) {
  .image-button {
    width: 150px; /* 在屏幕宽度小于480px时，按钮宽度为150px */
    height: 150px; /* 在屏幕宽度小于480px时，按钮高度为150px */
  }
}

通过以上的代码示例，你可以保持图像按钮的位置和正确的大小，并根据不同的屏幕尺寸和设备类型做出响应。你可以根据需要调整容器和按钮的大小，并根据实际情况修改媒体查询的规则。