Как мне сделать этот раздел фон отзывчивым? - PullRequest
Новая
       46

Как мне сделать этот раздел фон отзывчивым?

0 голосов
/ 03 марта 2019

Я пытаюсь сделать фон моего тега <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>

1 Ответ

0 голосов
/ 03 марта 2019

раздел тег не влияет на .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>
...