Have a fixed that doesn't displace itself when I scroll

Question

I want to have a background image that takes all the screen and stays static when I scroll.

I have this component in a React Native project:

<ImageBackground`     style={styles.backgroundImage}
 source={require('../assets/images/Fondo1b.jpg')}>
 ....
</ImageBackground>

It is wrapping another components and it has this style:

  backgroundImage: {
    flex: 1,
    resizeMode: 'cover',
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height
  },

When I scroll up and down, it moves with the screen: GIF link

In here you can see how it displaces with the scroll.

I need it to stay static occuping the size of the screen, not moving when I scroll and not displacing my FAB (it's Native Base's FAB, it that helps...) Any tips, please?

I believe what you’re looking for is `background-attachment: fixed` — SakoBu, Jun 12 '19 at 17:39

varoons · Accepted Answer · 2019-06-17T19:36:14.643

2

Check this out. Need exactly this for React Native

https://medium.com/azimuth/adding-a-static-background-for-react-native-scrollview-79aa6b43e314

<ImageBackground style={styles.backgroundImage}/>  


  backgroundImage: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: -1
  },

edited Jun 17 '19 at 19:36

answered Jun 12 '19 at 17:49

varoons

3,807
1
16
20

Place your ScrollView element on top of ImageBackground. Also make its backgroundColor transparent – varoons Jun 12 '19 at 18:20
I'm out of class, but gonna try It tomorrow and let you know. Thanks! – Nira Jun 12 '19 at 18:34

Have a fixed that doesn't displace itself when I scroll

1 Answers1