rrutsche/react-parallax

Image background (wide ones) is not responsive for phone

Opened this issue · 3 comments

Filippinifra commented

Is your feature request related to a problem? Please describe.

Image background (wide ones) is not responsive for phone

Describe the solution you'd like
I think the best solution should be use a div with background image, background-size: contain; background-repeat: no-repeat; background-position: center; instead of img tag

Describe alternatives you've considered
Make javascript render image responsively

Additional context

Video record:

Untitled.mov

and this is the line code:

<Parallax bgImage={FirstParallaxImage} strength={500} style={{ height: '100%', opacity: 0.8 }} />

Deleted user commented

I'm having the same issue with this, I can make it look good at one screen size, but then if I look at it at any other screen size or a mobile/tablet, the dimensions of the image are all messed up.

rrutsche commented

Hey guys, thanks for the report. Can you send me a sandbox link (maybe fork this one https://codesandbox.io/embed/r0yEkozrw) or a link to a fiddle or something?
Would help a lot, thanks.

Deleted user commented

I think my issue was I was using an internal element to set the parallax height, I've sorted it now, thanks.