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

Ваш ответ

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

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