1

Задача: для header и секции, следующей за ним, нужно задать один background. Position:absolute; для header ситуацию не исправил.background получается задать либо header, либо section. Как задать 1 и тот же фон двум элементам ?

<header>

    <div class="logo">
            <a href="#">Transitive<span>by templated</span></a>
        </div>

    <section id="banner">
        <h1>Transitive</h1>
            <p>A full responsive, business-oriented HTML5/CSS3 template</p> <br>
            <p>built by <a href="#">templated</a>and released under the <a 
            href="#">Creative Commons</a>
            </p>
    </section>

3 ответа 3

1

А в чём проблема включить section в header и задать фон только header'у? Тогда он будет единым.

Если по какой-то причине этого сделать нельзя, просто оберните header и section общим div'ом и задайте фон этому диву.

9
  • 1
    Насколько знаю, header по иерархии элементов должен идти первым и оборачивать его во что-то - неправильно. Исправьте меня, если я не права 30 сен 2019 в 11:23
  • @Кристина, я знаю, что header нельзя помещать внутрь элементов footer, address или другого элемента header. Про то, что его в принципе нельзя ничем оборачивать, впервые слышу, если честно. Дайте ссылку, где такое написано 30 сен 2019 в 11:28
  • header можно совать куда угодно. И не раз. Да, это будет неверно семантически, но работать от этого не перестанет. 30 сен 2019 в 13:53
  • @Инквизитор, ну так-то всё что угодно можно совать куда угодно, и работать не перестанет. HTML в принципе не может не работать (это ж не язык программирования). Но мы именно семантику и валидность разметки обсуждаем. 30 сен 2019 в 14:16
  • вообще-то мы обсуждаем наследование стилей, а не валидность разметки. И, да, абсолютно никто не запрещает оборачивать хедер во что-нибудь еще - главное, чтобы тип элемента соотетствовал назначению. 1 окт 2019 в 10:14
0
header ~ section {background-color:red;}

Позиционирование тут абсолютно не при чем.

1
  • Обычный цвет, как я понимаю, тоже не при чем. Там, видимо, проблема с background-image: картинка должна быть одним фоном для двух элементов. 30 сен 2019 в 14:18
0

Ну а если использовать наследование?

html,
body {
  height: 100%;
}

body {
  background: url(https://im0-tub-kz.yandex.net/i?id=989a846708cb140a2493643d20e8abaf-l&n=13);
  background-size: 0;
}

header,
section {
  height: 100%;
  background: inherit;
  background-size: cover;
}
<header></header>
<section></section>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.