ホームページ分割レイアウト（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. は、両方のoutterコンテナの#business-topと#photography-bottomにheight: 50vh;を追加します。
2. あなたのコンテナカスタム背景画像を与える：background-image: url('url to image');
3. 画像がbackground-size: cover;
4. がposition:absolute; とtop: calc(50% - (height_of_sperator)px;