5

I am looking for a way to add a background image in React Native that would be styled equivalent to HTML's:

background-size: cover;
background-position: top center;

I am using ImageBackground and resizeMode="cover" but the image is vertically aligned to middle and I cannot get it to be aligned to top. Is there a prop that would allow setting vertical alignment/position in React Native?

resizeMode="strech" won't work for my case because the background image contains a logo that must not be distorted.

The image size is 1242 x 2436 to allow full height cover even on iPhone X. The logo is located on 1/6 top part of the image and must always be visible, bottom can be hidden depending on the device height and orientation, image must always be full width of the screen.

eggnukes
  • 180
  • 3
  • 20
  • a very reliable solution is to use and set the position absolute, something like if image is not in backgound of your View you can set zIndex props of view to 2,3 or more – DNA.h Sep 17 '18 at 09:27
  • @DNA.h this zooms my image and does not fit the full width in the screen (image must be full width). – eggnukes Sep 17 '18 at 09:36

0 Answers0