отзывчивое изображение в разделе

Question

как добавить в раздел отзывчивое фоновое изображение высотой 100%? Теперь у меня нет изображения.

    <section class="takecare">

    </section>

takecare{
  background-image: url("images/craft.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Answer 1

Я предлагаю вам добавить элемент 'section' перед .takecare на тот случай, если вы захотите добавить некоторые вещи в этот раздел и настроить их без добавления тонны классов и идентификатора.

section.takecare{
  background-image: url("images/craft.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Между прочим, ответ Амаба хорош, это всего лишь некоторые рекомендации.

Привет.

Answer 2

height: 100% не работает, если родительский узел не имеет фиксированной высоты. Попробуйте добавить фиксированный height вроде:

.takecare{
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/34/70_Years_Porsche_Sports_Car%2C_Berlin_%281X7A3888%29.jpg");
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

<section class="takecare"></section>

Answer 3

Я думаю, что есть опечатка. Ваш CSS должен выглядеть как

.takecare{ background-image: url("images/craft.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; }