The requirement is to place text over the globe wherever it appears in the viewport – i.e. whatever the aspect ratio of the image compared to the viewport. The main problem being that it is not centered either vertically or horizontally so normal text-centering techniques do not work.

If we measure the height and width of the image and the center position of the globe and its diameter (it doesn’t matter in what units)

then we can get CSS to calculate various percentage positions etc. so we can always place a div element on top of the globe.

Here is the snippet which does that using CSS variables for the dimensions so you can change them should the image change (or if you measure them more accurately!). The gray circle is just to show where the div has been placed and of course can be removed. You will want to look at the class naming and also the font sizes for the final production version.

There are more accurate ways of making text stay inside a circle but it’s hoped this snippet will at least help get the basic position right.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  /* the image width and height (in any unit) */
  --w: 23.6;
  --h: 14.9;
  /* the globe center and diameter */
  --cx: 12.4;
  --cy: 11;/*10.6*/
  --doriginal: 6.5;
  
  /* we need the actual width of the text to be a little less for portrait phones */
  --d: calc(var(--doriginal) - 0.1);
}

/* for when the width can be accommodated but we have to crop the top and bottom */
#headercontainer {
  width: 100vw;
  height: auto;
  margin-left: 0;
  margin-top: calc(calc(100vh - calc(100vw * calc(var(--h) / var(--w)))) / 2);
  position: fixed;
  overflow:hidden;
}

#headerimg {
  position: relative;
  width: 100vw;
  height: auto;
  overflow: hidden;
}

.center {
/* these 3 lines are here just to demonstrate where the text is going. Remove when have a real image */
  background-color: gray;
  border-style: solid;
  border-radius: 50%;
  
  position: absolute;
  width: calc(calc(var(--d) / var(--w)) * 100%);
  line-height: calc(calc(var(--d) / var(--w)) * 100vw);
  height: calc(calc(var(--d) / var(--h)) * 100%);
  text-align: center;
  left: calc(calc(calc(var(--cx) - calc(var(--d) / 2)) /var(--w)) * 100%);
  top: calc(calc(calc(calc(var(--cy) - calc(var(--d) / 1)) /var(--h)) * 100%));
}

.center h1 {
  margin: auto;
  /*font-size: 1.5em;*/
  font-size: 4vmin;
  font-weight: normal;
  text-transform: uppercase;
  /* font-family: $body-font; */
  font-family: Arial, Helvetica, 'sans serif';
  color: white;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
  letter-spacing: .5px;

/* for vertical centering */
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

/* for when the height can be accommodated but we have to crop the sides */
@media screen and (max-aspect-ratio: 236/149) {/* rumour has it that you cant use variables in aspect ratios - is that true? */
  #headercontainer, #headerimg {
    height: 100vh;
    width: auto;
    top: 0;
  }
  #headercontainer {
    margin-left: calc(calc(100vw - calc(100vh * calc(var(--w) / var(--h)))) / 2);
    margin-top: 0;
  }
  .center {
    padding: 0 20px 0 20px;/* to stop text flowing slightly out on the right on narrow portrait devices */
    line-height: calc(calc(var(--d) / var(--h)) * 100vh);
  }  
}

<div style="overflow:hidden;">
  <div id="headercontainer">
    <img id="headerimg" src="https://i.stack.imgur.com/kcTtE.png" />
    <div class="center"><h1>your industry link to trusted global market places and technologies</h1></div>
  </div>
  </div>

Here is the original answer to set the scene:

This is not a complete answer but it is too long for a sensible comment.

We need to ascertain exactly what is to happen on different device aspect ratios.

I’ve been through all the devices offered in Chrome dev tools and all can include the complete globe (just, in some cases) which is a good start, but the text is going to have to flow outside it in different ways. Could you look at these two images and say what you want the text to look like in each case.

Various things to be decided – what is the minimum font size that is acceptable, where the globe takes up most of the width is the text to have several more lines and flow out of the globe vertically, if so is it equally on both top and bottom, if the globe sits well within the viewport left and right what it the maximum width of the text box to be?

I have a splash/masthead/full page image whose center text needs to be pretty much always the same look/format as in this no matter what the resize. (see below imgur link)
[Glassball Background Image with Text]1

• I tried a workaround where the background had the text already as a part of the image, but my client complained about the lack of “luminosity” in the white that was lost, compared to the “brightness” of the white in the menus.

• The problem is that the glassball of the background image is slightly off center and throws everything else off.

• I also have a button that needs to be to the far right of the center text on desktops and below it on mobile screens.

• All of my code solutions have been changing the padding or margins, but I have to add endless media queries.

I’m working in Bootstrap 4… there must be a better solution than those I’ve tried.

Please any help or advice would help (and note that I”m terrible at photoshop and other workarounds).

Here’s my Masthead CSS:

.masthead {
  height: 100vh;
  background-image: url('../images/glassball2.jpeg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.btn {
  border-radius: 34.5px;
  border: none;
  color: white;
}

.btn.main-cta {
  font-family: $header-black;
  padding: 20px;
  font-size: 20px;
}

.splash-header h1 {
  text-transform: uppercase;
  font-family: $body-font;
  color: white;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4);
  letter-spacing: .5px;
  line-height: 1.3em;
}

And my HTML

<header class="masthead">
  <div class="container h-100">
    <div class="row h-100 align-items-center">
      <div class="col-md-2">
        <p></p>
      </div>
      <div class="splash-header col-md-7 text-center">
        <h1>your industry link to trusted global marketplaces and technologies</h1>
      </div>

      <div class="col-md-3 text-center">
        <a class="main-cta gradient btn" data-value="contact" href="#">Schedule your free <br> 30-min consultation</a>
      </div>

    </div>
  </div>
</header>