0

Задача простая: у блока есть задний фон (картинка), требуется сделать его неподвижным (background-attachment: fixed) и при этом, чтобы блок, независимо от его ширины, был по центру.

Вот как получилось у меня:

<div class="cover-wrapper">
    <div class="cover"></div>
</div>
<style>
    .cover-wrapper {
        position: relative;
    }
    .cover {
        background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), url("https://i.imgur.com/1CjllnR.jpg");

        background-attachment: fixed;
        background-size: cover;

        width: 50%;
        height: 800px;


        position: relative;
        left: 50%;

        transform: translate(-50%, 0);
    }
</style>

Если ширина блока 50%, то отображается всё отлично: https://jsfiddle.net/dg0osyah/

Но, если ширина более 50%, то блок не по центру: https://jsfiddle.net/yubvmxeL/

Самое интересное, что если background-attachment выставить scroll, то всё будет работать как ожидается: https://jsfiddle.net/8vmyo9s6/

Если убрать transform в случае с background-attachment: fixed, то блок не будет прижат к левому краю, но тогда и не будет по центру, так что я подозреваю, что происходит что-то вроде конфликта background-attachment: fixed и transform

1 ответ 1

1

Да, происходит конфликт. Выглядит так, словно при смещении позиции браузер делает то же самое, что и при перемещении блока при скроллинге - вот фон и остается слева (из-за трансформации), а блок уходит с него (из-за свойства left).

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

На самом деле все гораздо проще. Дивы центрируются по горизонтали с помощью margin-left:auto; margin-right:auto;. И никакая трансформация тут не нужна:

.cover-wrapper {
  position: relative;
}

.cover {
  background-image: linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.07)), url("https://i.imgur.com/1CjllnR.jpg");
  background-attachment: fixed;
  background-size: cover;
  width: 80%;
  background-color: pink;
  height: 800px;
  position: relative;
  margin: 0 auto;
}
<div class="cover-wrapper">
  <div class="cover"></div>
</div>

1
  • Идеально. Спасибо огромное!
    – Bleno
    27 авг 2020 в 15:35

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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