How to set properties of background image in reactJS

I was able to get the background of my header container to show an image. However, i dont k ow how to set the size of the BACKGROUND IMAGE. SO what appears in the heading container just shows a image that is too big to appear in the header container.

I tried to search online Change the sizes of the containers using vh and vw Using Inline styles

//App.js
import React from "react";
import NavBar from "./NavBar";

const ContactUs = () => {
    return(
        <div className="contactUsContainer">
        <NavBar/>
        <div className="contactUsHeader">
           <h2>Contact Us</h2>
        </div>
        <div>
            <span></span>
        </div>
        </div>
    );
}

export default ContactUs;


//app.css

.contactUsContainer {
  height: 100%;
  width: 100%
}

.contactUsHeader {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("http://www.stapl.co.in/sites/default/files/imagecache/full-zoom/files/projects/6/83/6-83-wartsilla-3.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  height:30vh;
  width: 100vw;
  background-color: blue

}

Expected Result: background image to show full image, just in smaller size

Actual Result: background image shows very big, which omits much of the image content