React doesn't insert image as background-CodePudding

I'm creating a web page and I took a jpg and pgn image to put as a background.

But by no means does it appear on the page.

import './Entrada.css'


const Entrada = () => {
return(
    
    <div style={{ 
        backgroundImage: "url(/secoes_02.jpg)"
      }}>
        <div><img src='secoes_02.jpg'/></div>
        <div className='texto'>testatastastasta</div>
    </div>
    
  )
}
export default Entrada

In the code above I can place the image as a figure, but I cannot as a background. I've already tried to insert it by Css and tried import to.

 .geral{
background: url("/public/img/partes/secoes_02.jpg");
}

But in no way does it appear in my react. I already reinstalled the nodejs packages and changed the folder location. And the error continues. Has anyone experienced this?

CodePudding user response：

Try it plz. It works for me.

import footer from '../../assets/images/footer.png';

function MyComponent() {
  return (
      <footer style={{ background: `url(${footer})`, backgroundSize: "contain" }}>

CodePudding user response：

Try this.. worked for me

js:

   render() {
    return (
    
      <div className="bgimage">
          <div className='texto'>testatastastasta</div>
      </div>
      
    )
}

css:

.bgimage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  background-image: url(https://business.adobe.com/content/dam/dx/us/en/products/magento/open-source/open-source-marquee-2x.png.img.png);
}

Height is given 100%, based on your need you can adjust.