Центр фиксированный фон контейнера

Question

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

header {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 300px;
    display: block;
    background-image: url('...');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

Теперь у меня есть следующая проблема. В настоящее время фон центрируется в соответствии с шириной и высотой экрана. Так как заголовок находится вверху, фактический фон заголовка - это просто верх изображения. Кроме того, раздел изображения заголовка меняется каждый раз, когда я меняю высоту экрана, что не является моей целью.

Я хочу, чтобы изображение было отцентрировано в заголовке (центр изображения находится в центре заголовка, но только если я не прокрутил вниз). Кроме того, раздел изображения заголовка должен изменяться только в том случае, если я изменяю ширину, высоту или ширину заголовка, но не при изменении высоты экрана.

Answer 1

Вы можете положиться на vh единицу в сочетании с некоторыми calc(). Центр изначально 50vh, и вы хотите, чтобы он был 150px сверху, поэтому нам нужен перевод 50vh - 150px. Вам также следует избавиться от cover, если вы хотите, чтобы изображение не менялось при изменении высоты экрана, но оно может отображаться не так, как вы хотите.

_{Я заменил 300px на 100px длядемо}

.header {
  height:100px;
  border:1px solid;
  background:
    url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px)) fixed;
}
.not-fixed {
  background-attachment:initial;
  background-position:center;
  margin-top:20px;
}

body {
  min-height:200vh;
  margin:0;
}

<div class="header">

</div>
<div class="header not-fixed">

</div>

С использованием cover

.header {
  height:100px;
  border:1px solid;
  background:
    url(https://picsum.photos/id/1014/1200/800) 50% calc(50% - (50vh - 50px))/cover fixed;
}
.not-fixed {
  background-attachment:initial;
  background-position:center;
  margin-top:20px;
}

body {
  min-height:200vh;
  margin:0;
}

<div class="header">

</div>
<div class="header not-fixed">

</div>

Вы можете ясно видеть, как первое изображение отцентрировано точно так же, как второе без fixed

. Чтобы получить более подробную информацию о вычислениипроверьте это: Использование процентных значений с background-position на линейном градиенте (раздел Объединение пиксельных и процентных значений )

Answer 2

Попробуйте обернуть img (вне div заголовка) и div заголовка и поиграйте с положением / относительным / абсолютным положением заголовка поверх изображения.

Сделав это, вы можете использовать z-index длянажать на изображение назад