Homepage divided layout (CSS)

Question

I want to create this homepage for my site which only accepts add-ons of html/css without retouching any other rule.

Only achieved making the blocks themselves but no clue on how to put images behind the buttons,center everything up and make it responsive...

Any tip?

Homepage intended page link: www.lluisballbe.smugmug.com

Code used already is here:

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

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

h1 {
  margin: 0;
}

a {
  display: inline-block;
}

#business-top {
  display: flex;
  flex: 1;
  width: 100%;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:turquoise;
}

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

#logo-separator {
  text-align: center;
}

.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%;
  align-items: center;
  justify-content: center;
  background:gray;
}

#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;
}

#business-top:hover,
#photography-bottom:hover {
  flex: 3;
}

#business-top a:hover:before,
#photography-bottom a:hover:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

<div id="business-top">
  <a href="www.lluisballbe.smugmug.com">
    <div id="business-button">
      <h1>BUSINESS</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>PHOTOGRAPHY</h1>
    </div>
  </a>
</div>

Images to be used (each should cover 50%, can resize them and change pixel size if needed): https://dl.dropboxusercontent.com/u/54898895/Public.rar [Top Image][3]

[Bottom image][4]

Answer 1

I'd do it this way:

1. Add height: 50vh; to #business-top and #photography-bottom for both outter container.
2. Give your containers your custom background-images: background-image: url('url to image');
3. Make sure the images have background-size: cover;
4. Add your #logo-separator with position:absolute; and top: calc( 50% - (height_of_sperator)px;