Add background-position-y as an option for the background image

src/LazyHero.js

@@ -159,7 +159,13 @@ class LazyHero extends Component {
                     imageHeight={backgroundDimensions && backgroundDimensions.height}
                     imageSrc={this.props.imageSrc}
                     imageWidth={backgroundDimensions && backgroundDimensions.width}
-                    style={{ backgroundPositionY }}
+                    style={{
+                        backgroundPositionY: (
+                            this.props.backgroundPositionY
+                                ? this.props.backgroundPositionY
+                                : backgroundPositionY
+                        ),
+                    }}
                     transitionDuration={this.props.transitionDuration}
                     transitionTimingFunction={this.props.transitionTimingFunction}
                 />
@@ -176,6 +182,7 @@ class LazyHero extends Component {
 }
 
 LazyHero.defaultProps = {
+    backgroundPositionY: undefined,
     children: undefined,
     className: undefined,
     color: '#fff',
@@ -191,6 +198,7 @@ LazyHero.defaultProps = {
 };
 
 LazyHero.propTypes = {
+    backgroundPositionY: PropTypes.string,
     children: PropTypes.node,
     className: PropTypes.string,
     color: PropTypes.string,

website/src/components/App.js

@@ -15,6 +15,7 @@ function App(props) {
     return (
         <div className="App">
             <LazyHero
+                backgroundPositionY={props.knobs.backgroundPositionY.current}
                 className={props.knobs.className.current}
                 color={props.knobs.color.current}
                 imageSrc={props.knobs.imageSrc.current}
@@ -54,6 +55,10 @@ const enhance = compose(
     pure,
     withState('id', 'setId', 0),
     withState('knobs', 'setKnobs', {
+        backgroundPositionY: {
+            description: 'backgroundPositionY property on the image. Will override parallax effect.',
+            type: 'string',
+        },
         children: {
             current: '<Logo />',
             description: 'Child components',