主页划分布局（CSS）

Question

我想为我的网站创建这个主页，它只接受html / css的附加内容，而不会修改任何其他规则。

只有制作了自己的块，但没有关于如何将图像放在按钮后面的线索，将所有内容集中在一起并使其响应......

任何提示？

Homepage intended 页面链接：www.lluisballbe.smugmug.com

已经使用的代码在这里：

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>

要使用的图像（每个应覆盖50％，可以调整大小并根据需要更改像素大小）： https://dl.dropboxusercontent.com/u/54898895/Public.rar [顶部图片] [3]

[底部图片] [4]

Answer 1

我这样做：

1. 为{out}容器添加height: 50vh;到#business-top和#photography-bottom。
2. 为您的容器提供自定义背景图片：background-image: url('url to image');
3. 确保图片有background-size: cover;
4. 使用#logo-separator添加position:absolute; 和top: calc( 50% - (height_of_sperator)px;