0

I need help with CSS in my react-redux app where I'm also using styled-components and react-spring to add animations to my app

I have my the whole container with padding and I need to add images which should go in the background like shown in this image see those images on the side

but my code has JSX-components/HTML elements like following:

<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>

so now how can I write nullify that container's padding for theses background images and then add them at the specific point as shown in the pic the css for each of these image componnet is following:

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;
`;
  • Please note that responsiveCSS is an helper function created to work when the site loads on devices with various display sizes

so what changes should I made, for reference please look at this image : https://cdn.discordapp.com/attachments/238727603618447362/514687148197150720/Screen_Shot_2018-11-20_at_4.50.58_PM.png

Divyesh Parmar
  • 321
  • 1
  • 6
  • 15
  • Do you want to images to align with the top of the container? As if there were no padding? If so, you could try adding negative margin equal to the padding amount. – Steve Holgado Nov 23 '18 at 19:01
  • oh yes that did solve the confusion, I was thinking of ignoring the container's padding earlier. Thank you @SteveHolgado – Divyesh Parmar Nov 24 '18 at 08:13

0 Answers0