JSFiddle - React, Tailwind, and code Playground

HTML

<div id="headerWrapper">
  <div id="headerBorder">
    <div id="headerContent">
      <br />
      <br />
      <br />
        jsFiddle Run Button use may show cached image at first.<br />
        Border radius is used so you can see the red background in wrapper.
      </div>
   </div>
</div>

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

<br /><br /><br />

Some text content.

CSS

#headerWrapper {
    position: fixed;
    width: 100%;
    height: auto;
    background-color: red; /* Omit to see body content scroll behind radius.  */
}
#headerBorder{
    border: 3px solid blue; 
    border-radius: 35px; 
    -moz-border-radius: 35px; 
    -webkit-border-radius: 35px; 
    overflow:hidden;
}
#headerContent {
    /* Try wallpaper image that works well with background-size:cover option. http://files.customize.org/thumbnails/larger/10302.jpg  */
    background-image:url("http://lorempixel.com/400/200/sports");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain; /* Try a change from contain to cover */
    background-color: yellow;
    height: 200px;
    opacity: 1;
}