I'm Transferring some design to a web page, but I can't seem to get the background image to show. I've checked various solutions online and they keep telling me to add the 'background-image' property, which I have done. Yet it doesn't work. I've pasted the code below. I apologise if it's a very obvious mistake as I'm not quite familiar with CSS. Could someone please point out where my mistake is?

import React from "react";
import styled from "styled-components";

// Assets
import HeaderImage from "../../assets/img/covlie_homepage_illustration.png";


export default function Header() {
  return (
    <Wrapper id="home" className="container flexSpaceCenter">
      <LeftSide className="flexCenter">
        <div>
          <h1 className="extraBold font60">Some Text</h1>
          <HeaderP className="font13 semiBold">
            Some Text
          </HeaderP>
        </div>
      </LeftSide>
      <RightSide>
        <ImageWrapper>
          <Img className="radius8" src={HeaderImage} alt="office" style={{zIndex: 9}} />
        </ImageWrapper>
        <GreyDiv className="lightBg"></GreyDiv>
      </RightSide>
    </Wrapper>
  );
}


const Wrapper = styled.section`
  padding-top: 80px;
  width: 100%;
  min-height: 840px;
  background-image: transparent url('../../assets/img/page_heade_rbackground_image.png') 0% 0% no-repeat padding-box;
  @media (max-width: 960px) {
    flex-direction: column;
  }
`;
const LeftSide = styled.div`
  width: 50%;
  height: 100%;
  @media (max-width: 960px) {
    width: 100%;
    order: 2;
    margin: 50px 0;
    text-align: center;
  }
  @media (max-width: 560px) {
    margin: 80px 0 50px 0;
  }
`;
const RightSide = styled.div`
  width: 50%;
  height: 100%;
  @media (max-width: 960px) {
    width: 100%;
    order: 1;
    margin-top: 30px;
  }
`;
const HeaderP = styled.div`
  max-width: 470px;
  padding: 15px 0 50px 0;
  line-height: 1.5rem;
  @media (max-width: 960px) {
    padding: 15px 0 50px 0;
    text-align: center;
    max-width: 100%;
  }
`;
const GreyDiv = styled.div`
  width: 30%;
  height: 700px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 0;
  @media (max-width: 960px) {
    display: none;
  }
`;
const ImageWrapper = styled.div`
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 9;
  @media (max-width: 960px) {
    width: 100%;
    justify-content: center;
  }
`;
const Img = styled.img`
  @media (max-width: 560px) {
    width: 80%;
    height: auto;
  }
`;

CodePudding user response：

I finally discovered the issue. I'm using styled components, and the implementation for styled components is different. First I should have imported the image

import bgImg from "../../assets/img/page_heade_rbackground_image.png"

Then implemented like this

const Wrapper = styled.section`
  padding-top: 80px;
  width: 100%;
  min-height: 840px;
  background-image: url(${bgImg});
  @media (max-width: 960px) {
    flex-direction: column;
  }
`;

CodePudding user response：

Don't know if this will help but the background image is set to transparent.

background-image: transparent url('../

I see that when you figured it out you didn't use transparent :)