Как установить полное фоновое изображение в CSS, используя стиль реагировать? - PullRequest
Новая
       17

Как установить полное фоновое изображение в CSS, используя стиль реагировать?

1 голос
/ 19 марта 2019

Здесь у меня есть один div Это изображение div, которое я хочу установить на весь фон, но оно не устанавливает полный фон (см. Скриншот ниже).Мой проект использует реагирование.Как установить изображение на весь фон?

enter image description here

<div
   style={{
      backgroundImage: `url(${defaultImages.backgroundOfImage})`,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'cover',
   }}
  >
</div>

Ответы [ 2 ]

2 голосов
/ 19 марта 2019

Свойство CSS, которое вы ищете, это background-size, а не background-position.Фрагмент, который я обычно использую для этого: 

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-image: url(path/to/image);

Или с React 

<div style={{
  backgroundSize: 'cover',
  backgroundRepeat: 'no-repeat',
  backgroundPosition: 'center',
  backgroundImage: `url(${pathToImage})`,
}} />

Редактировать: Это, вероятно, выходит за рамки вопроса, но я предлагаю вам объявить объект стиля где-нибудь еще и импортировать его каждый раз, когда вы хотите иметь один и тот же фоновый эффект для повторного использования

0 голосов
/ 19 марта 2019

Это не имеет ничего общего с ReactJS, а только проблема CSS.Вы должны использовать background-size:cover вместо background-position, так как свойство background background устанавливает начальную позицию фонового изображения, но не устанавливает размер изображения.

...