Fix Banner on the home page is shifted

- Added mock background image with minimal resolution

src/ui/pages/welcome/index.tsx

 import * as React from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {withStyles} from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { withStyles } from '@material-ui/core/styles';
 import { translate } from 'react-i18next';
 
 // import { navigateTo } from 'actions/navigation';
@@ -36,20 +36,31 @@ const styles = (theme) => ({
       },
     },
     backgroundImageWrapper:{
-        marginTop:'-25%',
+        display: 'flex',
+        alignItems: 'center' as 'center',
+        justifyContent: 'center' as 'center',
+        width: '100%',
+        zIndex: -1,
     },
     backgroundImage: {
-        top: '-50%',
-        display: 'block' as 'block',
-        marginBottom: '-100%',
+        backgroundImage: 'url(/images/entrypage.jpg)',
+        backgroundRepeat: 'no-repeat' as 'no-repeat',
+        backgroundSize: 'cover' as 'cover',
+        position: 'absolute' as 'absolute',
+        width: '100vw',
+        '& > img': {
+            width: '100vw',
+        },
         [theme.breakpoints.down('sm')]: {
-            minWidth: '1000px',
-            width:'110%',
-            marginTop:'0px',
+            width: 'initial',
+            '& > img': {
+                width: 'initial',
+            },
         },
     },
     background: {
         overflow: 'hidden' as 'hidden',
+        position: 'relative' as 'relative',
     },
     searchBox: {
         textAlign: 'center' as 'center',
@@ -311,12 +322,14 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
                     <Markdown source={ t('common.tagline') } />
                 </div>
                 <Grid container spacing={ 0 } className={ classes.background }>
-                    <div  className={ classes.backgroundImageWrapper }>
-                        <img className={ classes.backgroundImage } srcSet="
-                            images/entrypage1x.jpg 1000w,
-                            images/entrypage2x.jpg 2000w,
-                            images/entrypage4x.jpg 4000w "
-                        />
+                    <div className={ classes.backgroundImageWrapper }>
+                        <picture className={ classes.backgroundImage }>
+                          <source key="1" srcSet="images/entrypage.jpg" media="(max-width: 500px)"/>
+                          <source key="2" srcSet="images/entrypage1x.jpg" media="(max-width: 1000px)"/>
+                          <source key="3" srcSet="images/entrypage2x.jpg" media="(max-width: 2000px)"/>
+                          <source key="4" srcSet="images/entrypage4x.jpg" media="(min-width: 2001px)"/>
+                          <img src="images/entrypage.jpg"/>
+                        </picture>
                     </div>
                     <Grid item xs={ 12 }>
                         <div className={ classes.searchBox }>