Home Split Layout (CSS)

Question

I want to create this homepage for my site, which only allows the addition of html / css without retouching any other rule.

Only after reaching the blocks themselves, but I don’t know how to put the images behind the buttons, focus everything and make them responsive ...

What advice?

Estimated page link to page: www.lluisballbe.smugmug.com

The code used is already 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 (everyone should cover 50%, can change their size and, if necessary, change the size of the pixel): https://dl.dropboxusercontent.com/u/54898895/Public.rar [Top] [3]

[Bottom Image] [4]

Answer 1

I would do it like this:

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