Layout diviso per la homepage (CSS)

Question

Desidero creare questa home page per il mio sito che accetta solo componenti aggiuntivi di html/css senza ritoccare altre regole.

raggiunta solo rendendo i blocchi stessi, ma nessun indizio su come mettere le immagini dietro i pulsanti, centro tutto e rendono reattivo ...

Qualsiasi suggerimento?

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

codice utilizzato è già qui:

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>

immagini da utilizzare (ciascuno dovrebbe coprire il 50%, può ridimensionarli e modificare la dimensione dei pixel, se necessario): https://dl.dropboxusercontent.com/u/54898895/Public.rar [Immagine superiore] [3]

[immagine in basso] [4]

Answer 1

lo farei in questo modo:

1. Aggiungi height: 50vh; a #business-top e #photography-bottom sia per container outter.
2. Dare i vostri contenitori tuoi personalizzati fondo-immagini: background-image: url('url to image');
3. assicurarsi che le immagini hanno background-size: cover;
4. Aggiungi il tuo #logo-separator con position:absolute; e top: calc(50% - (height_of_sperator)px;