1 min
Sample HTML and CSS for large image header for blog home page

#css - #design - #blogging

borrowing ideas from the default ghost.org blog template design.

<section> 

<div id="site-head" style="background-image: url(http://mageemarsh.com/ek/lake-erie-fall-sunrise-a.jpg)"> 
    <div class="vertical">
        <div id="site-head-content" class="inner">
            <a href="blog.html"><div class="circular"></div></a> 
            <span id="blog-title">JR</span><br />
            <span id="blog-description">nature, food, technology, media, sports, politics, etc.</span>
        </div>
    </div>
</div>
</div>

<div id="sitewide">


*********************************


/* 
NOTE: HTML and BODY need defined per below and 
my section tag needs removed or redefined.

html {
    height: 100%;
    max-height: 100%;
}

body {
    height: 100%;
    width: 100%;
    max-height: 100%;
}
*/


 /* Big cover image on the home page */
#site-head {
    position: relative;
    display: table;
    width: 100%;
    /* height: 60%;  see NOTE above to make this work */
    text-align: center;
    color: #fff;
    background: #303538 no-repeat center center;
    background-size: cover;

/*    padding-top: 20px;  */
    padding-top: 3em; 
    padding-bottom: 2em;
}

/* Creates a responsive wrapper that makes our content scale nicely */
/* jrs - may not need this .inner */
.inner {
    position: relative;
    width: 80%;
    max-width: 700px;
    margin: 0 auto;
}

.circular {
    margin: 0 auto;
    width: 78px;
    height: 78px;
    border-radius: 39px;
    -webkit-border-radius: 39px;
    -moz-border-radius: 39px;
    background: url(http://mageemarsh.com/ek/magee-tower-3.JPG) no-repeat;
}

#blog-title {
    font-size: 2em;
    line-height: 2em;
}

#blog-description {
    font-size: 1em;
    line-height: 2em;
}
From JR's : articles
193 words - 1801 chars - 1 min read
created on Oct 26, 2013 at 08:03:42 pm - #
source - versions