Estoy transfiriendo un diseño a una página web, pero parece que no puedo mostrar la imagen de fondo. Revisé varias soluciones en línea y me siguen diciendo que agregue la propiedad 'imagen de fondo', lo cual hice. Sin embargo, no funciona. He pegado el código a continuación. Pido disculpas si es un error muy obvio ya que no estoy muy familiarizado con CSS. ¿Podría alguien indicarme dónde está mi error?
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; } `;No sé si esto ayudará, pero la imagen de fondo está configurada como transparente.
background-image: transparent url('../Veo que cuando lo descubriste no usaste transparente :)
Finalmente descubrí el problema. Estoy usando componentes con estilo y la implementación de los componentes con estilo es diferente. Primero debería haber importado la imagen.
import bgImg from "../../assets/img/page_heade_rbackground_image.png"Luego implementado así
const Wrapper = styled.section` padding-top: 80px; width: 100%; min-height: 840px; background-image: url(${bgImg}); @media (max-width: 960px) { flex-direction: column; } `;