Reposition background-image according to display size and unknown margins

Question

did this for my homepage and wanted to background image content to be the middle of the image as the display size decreases (right now it slides the content of the image to the left). Thought of media query but Client only allows for one add-on of CSS, not different stylesheet files.

Also, although stated * margin= 0; padding=0 a margin appears on my smartphone (Iphone 6) and want it to be clear full screen as in desktop. Make browser pretty small to see if from laptop/desktop.

It has to be CSS ONLY since my client (Smugmug) only allows for blocks of css and html on it, no javascript or whatsoever. Also adds its own CSS to the page so I can post the link if needed.

Any idea for the dynamic positioning of the images and the margins? Thanks!

html,
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding; 0;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  h1 {
    margin: 0;
  }

  a {
    display: inline-block;
  }

  #business-top {
    display: flex;
    flex: 1;
    height:50vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg
  );
      background-size:cover;
  }

  #business-button {
    transition: all 1s;
    -webkit-transition: all 1s;
    height: 3em;
    width: 12em;
    background-color: #2B2A2A;
    border: .2em solid #ff7600;
    border-radius: 1.8em;
    margin: auto;
    text-align:center;
  }


  #logo-separator {
    text-align: center;
    top: calc( 50%-height_of_separator)px;
  }

  .separator {
    display: block;
    position: relative;
    padding: 0;
    height: 0;
    width: 100%;
    max-height: 0;
    font-size: 1px;
    line-height: 0;
    flex: 0;
    border-top: 1px solid #ff7600;
    border-bottom: 1px solid #ff7600;
  }

  #logo {
    margin: auto;
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    margin: -75px;
    position: absolute;
    z-index:1;
  }

  #photography-bottom {
    display: flex;
    flex: 1;
    width: 100%;
    height:50vh;
    align-items: center;
    justify-content: center;
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-gPg5QBt/0/X3/_DSC5313-X3.jpg
  );
    background-size:cover;
  }

  #photography-button {
    height: 3em;
    width: 12em;
    background-color: #2B2A2A;
    border: .2em solid #ff7600;
    border-radius: 1.8em;
    margin: auto;
  }

  h1 {
    color: #ff7600;
    text-align: center;
    font-size: 1.4em;
    vertical-align: middle;
    line-height: 2.2em
  }

  #business-top,
  #photography-bottom {
    pointer-events: none;
    position: relative;
    transition: 1s;
    min-height: 200px;
  }

  #business-top a,
  #photography-bottom a {
    pointer-events: auto;
  }

<div id="business-top">
  <a href="www.lluisballbe.smugmug.com">
    <div id="business-button">
      <h1>PHOTOGRAPHY</h1>
    </div>
  </a>
</div>

<div id="logo-separator">
  <div class="separator"></div>
  <div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>

<div id="photography-bottom">
  <a href="www.lluisballbe.smugmug.com">
    <div id="photography-button">
      <h1>BUSINESS</h1>
    </div>
  </a>
</div>

Answer 1

you need to use background-position if you want to position a background image.

html,
  body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  body {
    display: flex;
    flex-direction: column;
  }

  h1 {
    margin: 0;
  }

  a {
    display: inline-block;
  }

  #business-top {
    display: flex;
    flex: 1;
    height:50vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-position: center center; 
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg
  );
      background-size:cover;
  }

  #business-button {
    transition: all 1s;
    -webkit-transition: all 1s;
    height: 3em;
    width: 12em;
    background-color: #2B2A2A;
    border: .2em solid #ff7600;
    border-radius: 1.8em;
    margin: auto;
    text-align:center;
  }


  #logo-separator {
    text-align: center;
    top: calc( 50%-height_of_separator)px;
  }

  .separator {
    display: block;
    position: relative;
    padding: 0;
    height: 0;
    width: 100%;
    max-height: 0;
    font-size: 1px;
    line-height: 0;
    flex: 0;
    border-top: 1px solid #ff7600;
    border-bottom: 1px solid #ff7600;
  }

  #logo {
    margin: auto;
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    margin: -75px;
    position: absolute;
    z-index:1;
  }

  #photography-bottom {
    display: flex;
    flex: 1;
    width: 100%;
    height:50vh;
    align-items: center;
    justify-content: center;
    background-position: center center; 
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-gPg5QBt/0/X3/_DSC5313-X3.jpg
  );
    background-size:cover;
  }

  #photography-button {
    height: 3em;
    width: 12em;
    background-color: #2B2A2A;
    border: .2em solid #ff7600;
    border-radius: 1.8em;
    margin: auto;
  }

  h1 {
    color: #ff7600;
    text-align: center;
    font-size: 1.4em;
    vertical-align: middle;
    line-height: 2.2em
  }

  #business-top,
  #photography-bottom {
    pointer-events: none;
    position: relative;
    transition: 1s;
    min-height: 200px;
  }

  #business-top a,
  #photography-bottom a {
    pointer-events: auto;
  }

<div id="business-top">
  <a href="www.lluisballbe.smugmug.com">
    <div id="business-button">
      <h1>PHOTOGRAPHY</h1>
    </div>
  </a>
</div>

<div id="logo-separator">
  <div class="separator"></div>
  <div id="logo"><img src="https://lluisballbe.smugmug.com/Assets-for-website/i-CsMnM3R/0/Th/800x800-round-Th.png"> </div>
</div>

<div id="photography-bottom">
  <a href="www.lluisballbe.smugmug.com">
    <div id="photography-button">
      <h1>BUSINESS</h1>
    </div>
  </a>
</div>

Answer 2

add this css property to your both divs

background-position: center;

as example like this

 #business-top {
    display: flex;
    flex: 1;
    height:50vh;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image : url(https://lluisballbe.smugmug.com/Assets-for-website/i-2KvXfrk/0/X3/_MG_9556-X3.jpg);
    background-position: center;

  }

do like this for your other div and try.