React component not displaying background image from Figma mockup

Other Questions Figma
1

Background image won’t render in my React styled-component

I’m working on converting a Figma design into a React component and running into an issue where the background image isn’t showing up. I’ve tried using both background and background-image CSS properties but neither seems to work. The image should appear as a blue background but it’s just not rendering at all.

import React from "react";
import styled from "styled-components";
import heroImage from "../assets/hero-bg.png";
import cardImage1 from "../assets/card-photo-1.png";
import cardImage2 from "../assets/card-photo-2.png";
import HeadingText from "../components/HeadingText.styled";
import DescriptionText from "../components/DescriptionText.styled";
import ActionButton from "../components/ActionButton.styled";

const MainContainer = styled.section`
  margin-top: 8rem;
  width: 100vw;
  height: 90vh;
  background: url(${heroImage});
  background-size: cover;
  background-position: center;
`;

const ContentWrapper = styled.div`
  display: flex;
  padding-left: 2rem;
`;

const ImageContainer = styled.div`
  flex: 1;
`;

const TextContent = styled.div`
  margin-left: 5rem;
  margin-top: 12rem;
  flex: 1;
`;

const TitleSection = styled.div`
  margin-bottom: 2rem;
`;

const DescriptionSection = styled.div`
  margin-top: 1.5rem;
  max-width: 45rem;
`;

const ButtonSection = styled.div`
  margin-top: 3rem;
`;

const SecondRow = styled.div`
  display: flex;
  margin-top: 4rem;
  align-items: center;
`;

const RightContent = styled.div`
  margin-left: auto;
  margin-right: 8rem;
  text-align: right;
`;

const HeroSection = () => {
  return (
    <MainContainer>
      <ContentWrapper>
        <ImageContainer>
          <img src={cardImage2} alt="Feature showcase" />
        </ImageContainer>
        <TextContent>
          <TitleSection>
            <HeadingText>
              Build Amazing
              <br /> Digital Experiences
            </HeadingText>
          </TitleSection>
          <DescriptionSection>
            <DescriptionText>
              Create powerful applications with our flexible platform. Whether you're building from scratch or extending existing functionality, our tools provide everything you need to succeed in the digital marketplace.
            </DescriptionText>
          </DescriptionSection>
          <ButtonSection>
            <ActionButton variant="primary" size="large">
              Get Started Today
            </ActionButton>
          </ButtonSection>
        </TextContent>
      </ContentWrapper>
      <SecondRow>
        <RightContent>
          <TitleSection>
            <HeadingText>
              Join Our
              <br /> Developer Network
            </HeadingText>
          </TitleSection>
          <DescriptionSection>
            <DescriptionText>
              Connect with thousands of developers worldwide. Our community offers support, resources, and networking opportunities to help you grow your skills and career.
            </DescriptionText>
          </DescriptionSection>
          <ButtonSection>
            <ActionButton variant="primary" size="large">
              Explore Resources
            </ActionButton>
          </ButtonSection>
        </RightContent>
        <ImageContainer>
          <img src={cardImage1} alt="Community network" />
        </ImageContainer>
      </SecondRow>
    </MainContainer>
  );
};

export default HeroSection;

Has anyone encountered this before? What could be preventing the background image from displaying properly?

2

right click and inspect the console for any image loadin errors. if your container’s empty, try adding min-height: 100px to see if that makes the bg show up.

3

It appears you are encountering a path resolution problem with your background image in styled-components. The image reference may not be processed correctly at runtime due to how webpack handles imports inside template literals. To resolve this, consider these approaches: first, use a static string path instead of an import. Alternatively, you could define your background image in a separate CSS file and import it into your component. Another option is to wrap your background declaration in a function that returns a style object, avoiding template literals altogether. I’ve faced similar issues, and confirming that the image is included in the final build output is essential. This should help solve the problem.

4

I see what’s happening. Your background image path is getting messed up during the build process. Super common when converting Figma designs to React.

Don’t bother wrestling with webpack configs and import paths - just automate the whole Figma to React workflow. Set up a system that pulls your Figma assets automatically and handles path resolution.

I built this exact thing for our design system. When designers update Figma, automation grabs new assets, optimizes them, and updates React components with correct paths. No more broken images or manual exports.

The system watches Figma changes, downloads assets to the right folders, generates styled components with proper image references, and handles responsive breakpoints from your Figma frames.

Your code’s fine once the paths resolve correctly. But why manually fix this when you can automate the entire pipeline?

Check out Latenode for this kind of automation. It connects Figma API with your build process seamlessly.

5

Check if you’re using Create React App or custom webpack. The image might not be getting processed through the build pipeline when you use it in template literals. I hit this exact issue with styled-components - bundlers sometimes handle imported assets differently when they’re interpolated into CSS strings vs used as src attributes. Try console.log(heroImage) to see the actual resolved path. Should look like /static/media/hero-bg.hash.png if it’s working. If you see the original path or undefined, the import isn’t resolving right and you’ll need to fix your build config or just move the image to public and reference it directly.

6

Had the same issue. It’s usually how the image path gets resolved during build. The bundler doesn’t always handle paths correctly in template literals with styled-components. Try background-image: url(${heroImage}) instead of background: url(${heroImage}) and throw in background-repeat: no-repeat to fix any rendering weirdness. Quick test - hardcode an image path to see if the import’s actually working. If hardcoded works but imported doesn’t, check your webpack config for image processing in CSS-in-JS. Also peek at the network tab to see if the image request goes through and what response you get.

7

Had the same issue last month moving from Figma. Try require() instead of import for your background image: background: url(${require('../assets/hero-bg.png')}) or just use the string path: background: url('../assets/hero-bg.png'). Make sure the file exists and isn’t corrupted. Figma exports sometimes have transparency problems that make images look invisible. Add a fallback background color to check if your container’s even rendering.