如何使此部分背景响应？

Question

我正在尝试使我的 <section> 标签的背景具有响应性，但出于某种原因，当我更改浏览器大小时它无法适应。我的代码有冲突吗？

@import url('https://fonts.googleapis.com/css?family=Questrial');
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
@keyframes breath {
  0% {
    background-size: 100% auto;
  }
  50% {
    background-size: 140% auto;
  }
  100% {
    background-size: 100% auto;
  }
}

#bkg {
  width: 100%;
  height: 100%;
  animation: breath 100s linear infinite;
}

section {
  font-size: 35px;
  text-align: center;
  color: black;
  font-weight: ;
  font-family: 'Questrial', sans-serif;
}

hr {
  border-top: 1px solid black;
}

html,
body {
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

.section {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

<section style="background-image: url(img/bg.png); background-size: cover;"></section>

Answer 1

section 标签不会受到 .section 的影响，这个参考标签 class="section" 而不是 <section> 检查下面的修改代码：

section {
  position: relative;
  background-size: cover;
  background-image: url('https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_960_720.jpg');
  background-repeat: no-repeat;
  font-size: 35px;
  text-align: center;
  color: black;
  font-family: 'Questrial', sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

<section>Lorem Ipsum</section>

如何使此部分背景响应？

How do I make this section background responsive?

html

javascript

css

background

responsive