如何在反应中设置背景图像内联样式的高度和宽度

Question

can someone please help me out with this ?

I have this problem: I am fetching an image from api and I want to set it as background (FULL-SCREEN background), somehow it doesn´t work for me when I want to set 100% height and width and other stylings to that image as inline styling. How am I supposed to do that ?

Or is it possible to fetch an image and somehow use it in css as background-image: ... ?

I am fetching an image from django back end.

render() {
        return (
        <section style={{backgroundImage: `url(${this.state.pic})`}}>
        <h3>404 Page Not Found!</h3>
        </section>
         )
    
    }

Answer 1

1. Give your section a classname.

2. Create a new CSS-styling sheet. Like "style.css" and link it to your react app.

3. Do the following

   render() { return ( <section className="mySection" style={{backgroundImage: `url(${this.state.pic})`}}> <h3>404 Page Not Found!</h3> </section> ) } //This goes in your style.css .mySection{ background-position: center; background-repeat: no-repeat; background-size: cover; width: 100%; heigth: 100%; } h3{ z-index: 99; }

Answer 2

I don't know about styling elements. This may help you!. You can refer here! https://reactjs.org/docs/dom-elements.html#style

render() {
  return (
    <section style={{
      backgroundImage: `url(${this.state.pic})`,
      backgroundPosition: center,
      backgroundRepeat: no - repeat,
      backgroundSize: cover
    }}>
      <h3>404 Page Not Found!</h3>
    </section >
  )
}