要使背景图片按比例缩放以适应页面，可以使用CSS的background-size属性。以下是一个示例代码：

HTML代码：

CSS代码：

.background-image {
  background-image: url('your-image-url');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  width: 100%;
  height: 100vh;
}

在上面的示例中，我们用一个div元素来作为背景图片的容器。通过设置background-image属性来指定背景图片的URL，background-size属性设置为contain表示背景图片将按比例缩放以适应容器，background-repeat属性设置为no-repeat表示不重复平铺背景图片，background-position属性设置为center center表示背景图片在容器中垂直和水平居中显示。此外，我们还设置了容器的宽度为100%，高度为100vh（视口高度），以使背景图片撑满整个页面。

通过以上的代码，背景图片将按比例缩放以适应页面，并保持居中显示。