Style updates for the full-page background image effect (.jsx for the syntax highlighting)

Home.jsx

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

// this url will need to be relative the the index.html file
// or you can a webpack image-loader for using urls relative to src files
const background = './shutterstock_383791612.jpg';

const sectionStyle = {
  // i'm using vw and vh here, but it's a personal preference
  // percentages will also work if you give the parent container some dimensions
	width: '100vw',
	height: '100vh',
	//minWidth: '100%',
	//minHeight: '100%',
	backgroundSize: 'cover',
	// 'left center' here if you want the chair area focused:
	backgroundPosition: 'center center',
	// bring back this line if you want a weird scroll-parallax situation:
	//backgroundAttachment: 'fixed',
	backgroundRepeat: 'no-repeat',
	backgroundImage: `url(${background})`
};

// this is just to add some height to demo ^that parallax
const extraSectionStyle = {
	width: '100vw',
	height: '50vh'
};

export default class Home extends Component{
render() {
    return (
		<div>
			<section style={sectionStyle}>
			</section>
			<section style={extraSectionStyle}>
				<p>
					{"I'm just here for heightness to demonstrate parallax scrolling stuff if you want it."}
				</p>			
			</section>
			<section style={extraSectionStyle}>
				<p>
					{"Don't mind me either, same thing really."}
				</p>			
			</section>
		</div>
    );
	}
}