Один и тот же background для header и следующей section

190

20 августа 2021, 22:40

Задача: для 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>

Answer 1

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

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

Answer 2

header ~ section {background-color:red;}

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

Answer 3

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

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; 
}