Как переопределить или обнулить заполнение CSS контейнера в приложениях React

Question

Мне нужна помощь с CSS в моем приложенииact-redux, где я также использую styled-components и react-spring для добавления анимации в свое приложение.

У меня есть весь контейнер с отступом, и мне нужночтобы добавить изображения, которые должны идти в фоновом режиме, как показано на этом изображении, посмотрите эти изображения на стороне

, но мой код имеет JSX-компоненты / элементы HTML, такие как:

<Container paddingTop={paddingTop}>
        <BGCircleDotRed>
          <img src="/images/bg_triangle_blue.png" alt=""/>
        </BGCircleDotRed>

    <BGSwooPink>
            <img src="/images/bg_swoo_pink.png" alt=""/>
          </BGSwooPink>
    ... // and other backgroun images components
</Container>

, так что теперьКак я могу написать обнулить заполнение этого контейнера для фоновых изображений этих тезисов, а затем добавить их в определенной точке, как показано на рисунке ниже для каждого из этих компонентов:

export const BGCircleDotRed = styled.div`
  position: relative;
  height: auto;
  // padding-right: 9%;
  ${responsiveCSS({
    'width': { sm: 5, md: 10, suffix: '%'}
  })};
  z-index: -1;
  opacity: 0.2;
`;

• Обратите вниманиеresponsiveCSS - это вспомогательная функция, созданная для работы, когда сайт загружается на устройства с различными размерами экрана

. Какие изменения следует внести, для справки посмотрите на это изображение: https://cdn.discordapp.com/attachments/238727603618447362/514687148197150720/Screen_Shot_2018-11-20_at_4.50.58_PM.png