如何使背景图像响应？

Question

我想知道如何让div的背景响应

我的代码：

    height:500px;
    background-image: url(../images/Doctor.jpg);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;

结果：

当我缩小时：

问题是，当我放大或缩小时，我希望医生图像固定为缩放而不是滚动

Answer 1

为了使其具有响应性，请尝试以下代码段。不要设置宽度，高度或边距。

body {
  background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #464646;
}

span {
  color: tomato;
  font-weight: bold;
  font-size: 2em;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
}

<span>Responsive Background<br/>Image</span>

Answer 2

试试这个

    height: auto;
    background-image: url(https://cdn.dribbble.com/users/394/screenshots/196178/attachments/3368/background-circles.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;