Как установить свойства фонового изображения в reactJS

Мне удалось получить фон моего контейнера заголовка, чтобы показать изображение. Однако я не знаю, как установить размер ФОНОВОГО ИЗОБРАЖЕНИЯ. Итак, то, что появляется в контейнере заголовка, просто показывает изображение, которое слишком велико для отображения в контейнере заголовка.

Я пытался искать в Интернете Измените размеры контейнеров, используя vh и vw Использование встроенных стилей

//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

}

Ожидаемый результат: фоновое изображение для отображения полного изображения, только меньшего размера.

Фактический результат: фоновое изображение отображается очень большим, что исключает большую часть содержимого изображения.