Returns the same element 2 times

Question

im trying to do a Netflix clone app and i have an issue. Im watching a video while doing it and im doing what i see in the video.

I have added a banner image with this code.

Code :

function Banner() {
  return ( 
    <header 
      className="banner" 
      style={{
        backgroundSize: "cover",
        backgroundImage: 'url("https://thelesfilms.files.wordpress.com/2016/06/netflix-banner.jpg?w=640")',
        backgroundPosition: "center center",
      }}>
    </header>
  );
}

CSS :

.banner {
  height: 200px;
  position: relative;
}

When the guy in the video writes the same code, it works correctly and one image appears as expected. When i do the same thing, there are double image and i dont understand why. (I didnt return Banner function 2 times in HomeScreen.js.)

I am sorry but there is nothing to share in parent component. I am just returning Banner.js on HomeScreen with doing — impeR, Apr 16 '23 at 20:19
maybe try to set the `background-repeat: no-repeat;` https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat?retiredLocale=de I know you have set it to cover, but nothing else to make from what I see. — Snake_py, Apr 16 '23 at 20:25
I can only assume that you are trying to write the clone in react, right? Try to remove the Compontent from your App Component. See: https://stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react — snpz, Apr 16 '23 at 23:04
This is not pure javascript. Please insure to include tags or info regarding what framework you are using. — Jon P, Apr 17 '23 at 00:59

score 0 · Answer 1 · answered Apr 17 '23 at 00:30

Try removing the ?w=640 from the image URL,

function Banner() {
  return ( 
    <header 
      className="banner" 
      style={{
        backgroundSize: "cover",
        backgroundImage: `url("https://thelesfilms.files.wordpress.com/2016/06/netflix-banner.jpg")`,
        backgroundPosition: "center center",
      }}>
    </header>
  );
}

.banner {
  height: 200px;
  position: relative;
  background-repeat:no-repeat;
}

Returns the same element 2 times

1 Answers1