image not displaying on 100% width in React JS-CodePudding

I want the image to display on 100% of the screen but its only displaying as the original image size im following this https://www.youtube.com/watch?v=mU6anWqZJcc Im trying to get the result like that at 7:45:28 React as below

import React from 'react';
import './hello.css';
import shoe3 from './shoe3.jpg';
 
const Hello = () =>
{
    return (
        <div className='body'>
            <div className="box1">
                <h1>img 1</h1>
            </div>
         </div>
    )
}
export default Hello;

CSS as below

body,
html {
  height: 100%;
  margin: 0;
}
.box1 {
  background-color: purple;
  background-image: url(shoe1.jpg);
  background-repeat: no-repeat;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
  color: white;
}
.box1 img {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}

CodePudding user response：

Maybe because your image size is smaller than the container size and you are setting background-repeat to no-repeat. Set the background-size to cover will force it to take the full-width.

background-size: cover;

CodePudding user response：

This article from w3schools should help you. If you want image to be 100% page heigh make sure to change height to 100vh.