У меня есть фоновое изображение, которое я хочу покрыть весь экран без заголовка. Я также не хочу, чтобы мое фоновое изображение прокручивалось. Он не должен перемещаться, когда пользователь прокручивает контент.

По этой причине для размещения фона я использую следующее:

    <div
      className={style.app}
      style={{
        backgroundImage: `url(${HomePhoto})`,
        backgroundRepeat: "no-repeat",
        backgroundAttachment: "fixed",
      }}
    ></div>

Я пытаюсь добавить дополнительные свойства CSS, чтобы предположить, что используются правильная высота и ширина:

    height: 100vh;
    width: 100vw;
    margin-top: 4rem;
    background-size: 100% 100%;

Однако margin-top не применяется, пока я не удалю backgroundAttachment: "fixed". Есть ли способ достичь обоих стилей?

0
tdammon 8 Дек 2020 в 18:46

1 ответ

Лучший ответ

Вы можете использовать свойство backgroundPosition, которое позволяет перемещать фоновое изображение в его контейнере: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

<div
  className={style.app}
  style={{
    backgroundImage: `url(${HomePhoto})`,
    backgroundRepeat: "no-repeat",
    backgroundAttachment: "fixed",
    backgroundPosition: "100px 0", // or vh
  }}
></div>
2
Zsolt Meszaros 8 Дек 2020 в 16:02