3

I have a background image set on a banner that is at the top of my Netflix clone. I like how it looks except when I scale the window to make it bigger it cuts of the image. I can't figure out how to scale the image and keep the top lined with the top.

Example when the window is small -- looks great! [1]: https://i.stack.imgur.com/e0x1O.png

Example when the window is scaled a bit -- unclear whats going on in the picture [2]: https://i.stack.imgur.com/kCMG1.png

Currently, this is how the image is set up, I added the 'cover' and 'center' to try to fix it but no luck.

<header
  className="banner"
  style={{
    backgroundImage: `url(${movie?.backdrop_path})`,
    backgroundSize: "cover",
    backgroundPosition: "center",
  }}
>
Lorenzo Covarrubias
  • 89
  • 8
  • hi, interesting, not sure if these options might help https://stackoverflow.com/questions/20565736/my-background-image-get-cut-off-at-the-bottom – IronMan Feb 18 '21 at 23:15

1 Answers1

1

Try backgroundPosition: "top".

The image is being centered vertically and the background size of "cover" is causing the top and bottom to be cut off to fill the width.

background-position: top anchors the picture to the top, from the top, so you'll only lose the bottom part of the image.

cam
  • 3,179
  • 1
  • 12
  • 15