How to set `ImageBackground` image position in react native. Like in css `background-postion: bottom`?

Question

So I'm setting a background image in react native but I need the position of the background image to be set to bottom. So if anyone knows how to achieve this.

I have tried adding backgroundPosition but it seems it is not supported

<ImageBackground
  source={require("../assets/img/bg-top.png")}
  // resizeMethod={'auto'}
  style={{
    width: "100%",
    height: 120,
    padding: 20,
    paddingVertical: 40,
    backgroundPosition: "bottom" // not working
  }}
  imageStyle={{
    resizeMode: "cover",
    alignSelf: "flex-end"
  }}
>
  <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>;

I expect the image alignment should start from the bottom rather it starts from the top

Vishal Dhanotiya · Accepted Answer · 2019-04-14 10:18:45Z

11

React native provided bottom and position tag to set UI at bottom. Please replace backgroundPosition tag from image style into

position: 'absolute', bottom:0

 <ImageBackground
  // resizeMethod={'auto'}
  style={{
    width: "100%",
    height: 120,
    backgroundColor:'#000',
    padding: 20,
    paddingVertical: 40,
    position: 'absolute',
  bottom:0
  }}
  imageStyle={{
    resizeMode: "cover",
    alignSelf: "flex-end"
  }}
>
  <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>

Please check snack expo

https://snack.expo.io/@vishal7008/bottom-ui

answered Apr 14, 2019 at 10:18

Vishal Dhanotiya

2,6481 gold badge16 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Horst · Accepted Answer · 2020-05-05 07:13:09Z

6

The image inside ImageBackground has the default style:

position: 'absolute'
top: 0
bottom: 0
right: 0
left: 0

So, we can just remove the top: 0 by setting

top: undefined

together we have

<ImageBackground
  source={require("../assets/img/bg-top.png")}
  // resizeMethod={'auto'}
  style={{
    width: "100%",
    height: 120,
    padding: 20,
    paddingVertical: 40,
    overflow: 'hidden' // prevent image overflow the container
  }}
  imageStyle={{
    resizeMode: "cover",
    height: 200, // the image height
    top: undefined
  }}
>
  <Text style={{ color: "#D8D8D8", fontSize: 16 }}>Login</Text>
</ImageBackground>

answered May 5, 2020 at 7:13

Horst

1,73915 silver badges21 bronze badges

Comments

AmerllicA · Accepted Answer · 2020-08-29 17:53:13Z

2

For implementing the position of the background image I use the following code, actually I use the ImageBackground component as the wrapper of the entire screen:

<ImageBackground
  style={styles.screenWrapper}
  imageStyle={styles.backgroundStyle}
  source={{ uri: movieDetail?.image?.medium?.url }}
>
 // children

~~~

const styles = createStyle({
  screenWrapper: {
    flex: 1,
    position: 'relative',
  },
  backgroundStyle: {
    resizeMode: 'cover',
    position: 'absolute',
    top: 0,
    bottom: '45%',
  },

Finally, I reach my desire:

Note: The above codes are not workable, it is just pseudo-code to convey my exact idea.

answered Aug 29, 2020 at 17:53

AmerllicA

33.2k18 gold badges146 silver badges170 bronze badges

Comments

Fabian · Accepted Answer · 2019-04-14 08:30:12Z

1

the backgroundPosition you know from CSS is not supported according the docs.

There is a similar question:

https://stackoverflow.com/a/53726116/9899193

Does this help you?

answered Apr 14, 2019 at 8:30

Fabian

1972 silver badges11 bronze badges

Comments

Daniel Keele · Accepted Answer · 2023-05-26 21:31:35Z

0

Using flexbox and percentages:

function () {
  const [height, setHeight] = useState(0);
  // or const {height} = useWindowDimensions();

  return (
    <View
      style={{flex: 1, justifyContent: 'flex-end'}}
      onLayout={e => setHeight(e.nativeEvent.layout.height)}>
      <ImageBackground
        style={{
          width: '100%',
          height: height * 0.75,
        }}
        alt="..."
        source={"..."}
      />
    </View>
  );
}

The trick is you need a hard number for height.

edited May 26, 2023 at 21:31

answered May 26, 2023 at 21:05

Daniel Keele

574 bronze badges

Collectives™ on Stack Overflow

How to set `ImageBackground` image position in react native. Like in css `background-postion: bottom`?

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related