JSFiddle - React, Tailwind, and code Playground

by Jeremy Lewis

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="bgtest1.css" />
    </head>
    
    <body>
        <!-- START MASTER DIV : Contains all other divs/blocks -->
        <div id="master">
            <div class="header"></div>
            <div class="nav"></div>
            <!-- Contains the bg image + middle content area -->
            <div class="midblock">
                <!-- this is the inside content of the midblock -->
                <div class="mid_inside"></div>
                <!-- END all middle area (bg + content) -->
            </div>
            <div class="footer"></div>
            <!-- END MASTER DIV -->
        </div>
    </body>

</html>

CSS

#master {
    background: rgb(255, 255, 255);
    width: 95%;
    margin: 0 auto;
    border: 1px solid rgb(0, 0, 0);
}
.header {
    height: 130px;
    background: rgb(0, 102, 204);
}
.nav {
    height: 60px;
    background: rgb(255, 140, 0);
}
.midblock {
    height: 600px;
    background-image: url('http://i475.photobucket.com/albums/rr120/mondo_trasho/Kit-Kat-Club-edit.jpg');
    background-size: 100% auto;
    /* width height */
    -moz-background-size: 100% auto;
    /* for Firefox */
}
.mid_inside {
    height: 600px;
    width: 75%;
    background: rgb(200, 200, 200);
    margin: 0 auto;
}
.footer {
    height: 80px;
    background: rgb(0, 102, 204);
}