roximonoxide | Coal Box [Community Style]

Here's a community layout I did a million years ago. It's super messy because I never cleaned it up, but I like the look and thought I'd share it with anyone who might want it for something.

Title: Coal Box
Credit:

roximonoxide
Base style: Dreamer for Dusty Foot
Type: CSS
Tested in: Chrome, Opera (lightly in IE & Safari)
Features: Fixed width entries.

[Click for FullSize Preview]

Installation:

1. Select Dreamer for Dusty Foot (by timeasmymeasure) as your base style.
2. Visit Customize Your Theme > Presentation Tab > Page Setup: 2 Columns (sidebar on the right)
3. Visit Customize Your Theme > Custom CSS > Disable Use layout's stylesheet(s)
4. Copy and past the following code intothe Use embedded CSS text box:

/* Coal Box by roximonoxide */
/* Only Tested on Communities. Edit as you please. */

a[title*="(no subject)"] {
display: none; }

H1, H2, H3 {
    margin: .25em 0;
    padding: .25em 0;
}

H1 {font-weight: 600;}

H2 {font-weight: 400!important;}

img {
    border: none;
}

hr {
    display: none;
}
.entry-content hr,
.comment-content hr {
    color: #2C2825;
    display: block;
    margin: 1em 10%;
}

body {
    font-family: "Verdana", "Tahoma", sans-serif; 
    font-size: 9pt;
    padding: 0;
    color: #fff;
	background-color: #241E1B;

}

html body {
    margin-left: 0em;
    margin-right: 0em;
}

a { color: #da2400;
 }
a:visited {  }
a:hover { color: #767676;
 }
a:active {  }

q { font-style: italic; }

.one-column #content { float: none; }
.two-columns-left #content,
.three-columns-sides #content {
    border-left: 10px solid transparent;
}
.two-columns-right #content,
.three-columns-sides #content {
    border-right: 10px solid transparent;
}
.three-columns-left #content {
    border-left: 310px solid transparent;
}
.three-columns-right #content {
    border-right: 10px solid transparent;
}
.column-right #content {
    min-width: 10px; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
}

#content-footer {
    height: 0;
    font-size: 0; /*to make IE happy*/
    clear: both;
}

#header, #footer {
    margin: 0px 0px 25px 0px;
    clear: both;
    padding: .5em;
}

#header {
    width: 75%;
}

#footer {
    width: 75%;
}

h1#title {
    font-family: 'Verdana', sans-serif; 
    font-size: 12pt;
    color: #302A27!important;
    margin-bottom: -2px;
}

h2#subtitle { font-family: 'Verdana', sans-serif; 
    font-size: 9pt;
    color: #682400!important;
    margin-top: -2px;}

h2#subtitle,
h2#pagetitle {
    font-family: 'Verdana', sans-serif; 
}

#pagetitle {display: none;}

#footer {
    background: transparent;
}

#footer a { color: #3a3a3a;
 }
#footer a:active {  }
#footer a:hover { color: #eaeaea;
 }
#footer a:visited {  }

#primary { 
	float: left;
	width: 65%;
	max-width: 550px;
	min-width: 400px;
	border: 0px solid #000;
}

.one-column #primary { 
	float: left;
}

#primary > .inner:first-child {
    padding: 15px;
	
}

.one-column #secondary { 
	width: 200px; 
}

.two-columns-left #secondary,
.three-columns-sides #secondary {
    float: right;
    width: 200px;
}
.two-columns-right #secondary {
    float: right;
    width: 200px;
}
.three-columns-left #secondary {
    float: right;
    width: 200px;
}
.three-columns-right #secondary {
    float: right;
    width: 200px;
}

#secondary > .inner:first-child {
    padding: 10px;
}

.one-column #tertiary { width: auto; }

.two-columns-left #tertiary,
.two-columns-right #tertiary {
    clear: both;
}
.two-columns-left #tertiary { margin-left: -15em; }
.two-columns-right #tertiary { margin-right: -15em; }
.two-columns-left #tertiary .module,
.two-columns-right #tertiary .module {
    float: right;
    width: 15em;
}
.three-columns-left #tertiary {
    float: right;
    width: 15em;
    margin-left: -15em;
}
.three-columns-right #tertiary {
    float: right;
    width: 15em;
    margin-right: -30em;
    margin-left: 15em; /* so that #tertiary won't overlay #secondary in IE7 */
}
.three-columns-sides #tertiary {
    float: right;
    width: 15em;
    margin-right: -15em;
}

#tertiary > .inner:first-child {
    padding: 1em;
}

.navigation ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
.navigation li {
    display: inline;
    padding: 0 .5em;
}
.noentries {
    padding: 0 .5em;
}

/* entries */

.entry {
    color: #fff;
    background-color: #241E1B;
    border: 1px solid #2C2825;
    margin-bottom: 45px;
    margin-top: 25px;
}

.entry .header { padding: 10px 15px 0px 15px;
background-color: #2C2825;
}

.entry .entry-title, .entry .entry-title a, .entry .entry-title a:visited {
    font-family: 'Verdana', sans-serif; font-size: 10pt;
    color: #A21E00;
    text-transform: uppercase;
    font-weight: 400;
}

.entry .entry-title a:hover {
    color: #AD2B11; }

.entry a {  }
.entry a:visited {  }
.entry a:hover { }
.entry a:active {  }

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
    list-style-position: inside;
    }

.metadata ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}
.metadata li {
    margin-top: 2px;
}
.metadata.top-metadata ul {
    margin: 0;
}
.metadata.top-metadata {
    margin-bottom: 0;
}

.tag ul {
    display: inline;
    list-style: none;
    margin-left: 2px;
    padding-left: 0;
    padding-top: 0;
}
.tag ul li {
    display: inline;
    padding: 0 1px 1px 1px;
} /* same for month view */

ul.entry-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.entry-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.entry-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}

.entry-interaction-links a {  }

ul.entry-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

/* comments */

.comment-wrapper {
    padding: .5em 0;
}

.comment .comment-title, .comment .comment-title a {
    
}

.comment .comment-title {
    font-family: 'Verdana', sans-serif; font-size: 1.334em;
}

.comment-title h4 {
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
    padding: 0;
}

ul.comment-management-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: right;
}
ul.comment-management-links li {
    display: inline;
    padding: 0 .25em;
}

ul.comment-interaction-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}
ul.comment-interaction-links li {
    display: inline;
    padding: 0 .25em;
}

textarea#commenttext {
    width: 100%; /* fix for FF form width glitch */
}

/* archive */

table.month {
    margin: 0 auto;
    border-collapse: collapse;
}
table.month td {
    height: 3.25em;
}
table.month td,
table.month th {
    border: 1px solid; /* ? */
    padding: 3px;
}
table.month td p {
    margin: 0;
    padding: 3px;
}

.month dl dt {
    font-weight: bold;
}
.month dl span.time {
    padding-right: .5em;
}
.month dl h3 {
    display: inline;
    font-size: medium;
}
.page-month .month .entry-poster {
    margin-right: .5em;
}
.month dl .tag ul {
    margin-top: 0;
}

/* icons */

.sorting-options ul {
    list-style: none;
    margin-left: 0;
}

.sorting-options ul li {
    display: inline;
}

.keywords ul {
    display: inline;
    list-style: none;
    margin-left: .5em;
    padding-left: 0;
}

.keywords ul li {
    display: inline;
    padding: .25em;
}

/* modules */

.module {
    margin: 10px 10px;
    background-color: transparent;
}

.module a {  }
.module a:visited {  }
.module a:hover {  }
.module a:active {  }

.module h2 {
    color: #3a3a3a;
    font-family: 'Verdana', sans-serif; 
    font-size: 10pt;
}

.module-content {
	color: #3a3a3a;
    background-color: #241E1B;
	padding: 10px;
    font-family: 'Verdana', sans-serif; 
}

.module-content ul {
    list-style: outside;
    margin-left: 1em;
    padding-left: 0;
}
.module-content li {
    margin: .5em 0;
}

ul.userlite-interaction-links.icon-links {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

ul.userlite-interaction-links.icon-links li {
    display: inline;
    padding: 0 .20em;
}

ul.userlite-interaction-links.text-links {
    text-align: left;
}

.module-customtext .module-content {
	font-size: 8pt;
	line-height: 100%;}

.module-calendar .module-content {
    text-align: center;
}

.one-column .module-calendar .module-content {
    text-align: left;
}

.module-calendar table {
    margin: 0 auto;
}

.one-column .module-calendar table {
    margin: 0;
}

.module-calendar td {
    padding: 1px;
}
.module-calendar td a {
    display: block;
    padding: 2px;
}

.search-box {
    margin: .2em auto;
}

.ljuser {font-weight: 200!important;}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
    white-space: normal !important;
}
.module-pagesummary .module-content {
    color: #241E1B;
    word-wrap: break-word;
    font-size: 8pt;
}

.pagesummary-subject { font-size: 6pt;}

.module-credit dt, .module-credit dd {
    display: inline;
    margin: 0;
    padding: 0;
}
.module-credit dt {
    font-weight: bold;
    margin-right: 0.5em;
}

.tags_cloud li, .module-tags_cloud li { display: inline;
    list-style-type: none; }

.module-syndicate .module-content {
    text-align: center;
}

.one-column .module-syndicate .module-content {
    text-align: left;
}

.entry .userpic,
             .comment .userpic {
                 text-align: right;
                 }

/* Dusty Foot */
/* by timeasmymeasure*/

/* Main
***************************************************************************/

* {
    margin: 0;
    padding: 0;
    }

body {
    line-height: 110%;
    margin: 0;
    }

a, a:link, a:visited {
    text-decoration: none;
    }

img {
    border: none;
    }

p {
    margin: 1em 0;
    }

blockquote {
    background: #3a3a3a;
    color: ;
    border-left: 15px solid #d5d5d5;
    margin: 15px 15px 15px 50px;
    padding: 10px;
    width: 65%;
    }

code, kbd, pre, tt, textarea {
    font-family: monospace;
    }

ul {
    list-style-type: disc;
    margin-left: 50px;
    }

ol {
    list-style-type: decimal-leading-zero;
    margin-left: 50px;
    }

/* Page Containers
***************************************************************************/

#canvas {
	border: 0px solid #000;
    margin: 0 auto;
    width: 800px;
    min-width: 700px;
    }

#content {
    color: #000000;
    margin-left: 10px;
    }

#content a { color: #da2400; }
#content a:visited { color: ; }
#content a:hover { color: #767676; }
#content a:active { color: ; }

#primary > .inner:first-child {
    padding: 0;
    }

#secondary,
.three-columns #tertiary,
.one-column #tertiary {
    color: ;
    }

#secondary > .inner:first-child,
#tertiary > .inner:first-child {
    padding: 0;
    }

/* Header
***************************************************************************/

h1#title {
    margin: 0;
    padding: 10px 0 0 10px;
    }

h2#subtitle {
    margin: 0;
    padding: 0 0 0 10px;
    text-transform: lowercase;
    }

h2#pagetitle {
    margin: 0;
    padding: 10px;
    font-variant: small-caps;
    font-weight: lighter;
    }

#header .module-navlinks {
    background-color: transparent;
    text-align: left;
    padding-left: 10px;
    
    }

#header .module-navlinks ul {
    margin: 0;
    padding: 0;
    }

#header .module-navlinks li {
    display: inline;
    list-style: none;
    padding: 5px;
    margin: 5px 6px;
    }

#header .module-navlinks li a { color: #373532;
	padding-bottom: 2px;
	border-bottom: 3px solid #373532; }
#header .module-navlinks li a:visited { color: #373532;
	padding-bottom: 2px;
	border-bottom: 3px solid #373532; }
#header .module-navlinks li a:active { color: #373532;
	padding-bottom: 2px;
	border-bottom: 3px solid #373532; }
#header .module-navlinks li a:hover { color: #b7b3b0;
	padding-bottom: 2px;
	border-bottom: 3px solid #da2400; }

/* Navigation
***************************************************************************/

.navigation {
    margin: 0;
    font-size: .9em;
    padding: 10px;
    text-align: left;
    
    }

.navigation li {
    padding: 5px;
    }

.navigation .page-back a:before,
.navigation .page-forward a:after {
    vertical-align: 40%;
    }

/* Entries and Comments
***************************************************************************/

.text_noentries_day {
    border: none;
    border-bottom: 5px solid #d5d5d5;
    margin: 0 10px 20px;
    padding: 10px 0;
    }

.text_noentries_day {
    margin-bottom: 20px;
    margin-top: 20px;
    }

.entry-content {
	text-align: center;
    margin: 0 0 1em;
    padding: 35px 15px 20px 15px;
    }

.entry-title {
    margin: 0;
    padding: 0;
    }

/* Restore colors overridden by #content */
#content .entry .entry-title,
#content .entry .entry-title a, #content .entry .entry-title a:visited {
    color: #A21E00;
    }
    
#content .entry .entry-title a, #content .entry .entry-title a:visited {
    color: #AD2B11;
    }

.datetime {
    font-size: .8em; 
    color: #AFA89F;
    
    }

#content .datetime a {
    color: #AFA89F;
    }

.day-date { padding: 0 0 0 .5em; }

.entry-poster {
	background-color: #2C2825;
    border-bottom: 1px solid #2C2825;
    display: block;
    padding-bottom: 10px;
    padding-left: 15px;
    margin-bottom: 10px;
    }

.entry .userpic img {
    border: 5px solid #464646;
    }

.entry .metadata.bottom-metadata {
    clear: both;
    }

.entry .footer {
    clear: both;
    text-align: center;
    margin-bottom: 15px;
    
    }

.entry-management-links, .entry-interaction-links,
.comment-management-links, .comment-interaction-links {
    display: inline;
    text-align: right;
    }

.entry-management-links li, .entry-interaction-links li,
.comment-management-links li, .comment-interaction-links li {
    padding: 5px;
    }

#content .entry-management-links.text-links li a,
#content .entry-interaction-links li a,
#content .comment-management-links.text-links li a,
#content .comment-interaction-links li a {
    color: ;
    }

.entry-management-links.text-links li a,
.comment-management-links.text-links li a,
.comment-interaction-links.text-links .thread a {
    background-image: url(http://s.dreamwidth.org/stc/transmogrified/permalink.gif);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    padding-left: 14px;
    }

.entry-management-links.text-links .edit_entry a,
.comment-management-links.text-links .delete_comment a,
.comment-management-links.text-links .edit_comment a {
    background-image: url(http://s.dreamwidth.org/stc/transmogrified/edit.gif);
    }

.entry-management-links.text-links .edit_tags a,
.comment-interaction-links .parent a {
    background-image: url(http://s.dreamwidth.org/stc/transmogrified/tag.gif);
    }

.entry-management-links.text-links .mem_add a,
.entry-management-links.text-links .watch_comments a,
.comment-management-links.text-links .watch_thread a {
    background-image: url(http://s.dreamwidth.org/stc/transmogrified/memories.gif);
    }

.entry-management-links.text-links .link_prev a {
    background-image: url(http://s.dreamwidth.org/stc/transmogrified/previous.gif);
    }

.entry-management-links.text-links .link_next a {
    background-image: url(http://s.dreamwidth.org/stc/transmogrified/next.gif);
    }

.entry-interaction-links li a,
.comment-interaction-links li a,
.entry-management-links.text-links .tell_friend a {
    background-image: url(http://s.dreamwidth.org/stc/transmogrified/comment.gif);
    background-repeat: no-repeat;
    background-position: 0% 50%;
    display: inline;
    padding-left: 14px;
    }

.comment-management-links.text-links .delete_comment a {
    background-image: url(http://s.dreamwidth.org/stc/transmogrified/delete.gif);
    }

.text_noentries_day {
    margin-top: 20px;
    margin-bottom: 20px;
    }

.tag {
    border-bottom: 0px solid #fff;
    font-size: 8pt;
    color: #3E3932;    
    margin: 1.5px 0 10px 6px;
    padding-left: 10px;
    text-align: left;
    }

.metadata {
    color: #3E3932;
    line-height: 100%;
    font-size: 8pt;
    padding: 5px 5px 0px 15px;
    text-align: left;
    }

.metadata.bottom-metadata {
    border-top: 0px solid #fff;
    margin-top: 0;
    }

.metadata.top-metadata {
    border-bottom: 0px solid #fff;
    }

.metadata .metadata-item,
#content .metadata a, #content .tag a, #content .metadata a:visited, #content .tag a:visited {
    color: #3E3932;
    }
    
#content .metadata a:hover, #content .tag a:hover {
    color: #AFA89F;
    }

.footer li,
.entry .metadata li,
.tag li {
    list-style: none;
    margin-left: 0 !important;
    }

/* Comments
***************************************************************************/

.comment-wrapper .comment {
    border-bottom: 5px solid #fff;
    margin-bottom: 20px;
    margin-right: 10px;
    padding: 10px;
    }

#content .comment-wrapper .comment-title,
#content .comment-wrapper .comment-title a {
    color: ;
    font-variant: small-caps;
    letter-spacing: .1em;
    }

.has-userpic .comment .userpic {
    margin-top: -1em;
    }

.comment .userpic img {
    border: 5px solid #464646;
    }

.comment-poster {
    border-bottom: 1px solid #fff;
    display: block;
    margin-bottom: 10px;
    }

.comment .footer {
    margin-top: 15px;
    text-align: center;
    text-transform:uppercase;
    }

.page-reply .entry-wrapper {
    margin-top: 20px;
    }

#postform {
    border: 1px solid #fff;
    margin: 20px;
    }

#commenttext {
    width: 80%;
    }

.poster-ip {
    color: #AFA89F;
    
    }

.comment-pages {
    padding: 5px;
    }

/* Archive Pages
***************************************************************************/

.month-wrapper,
#archive-month dl {
    border: 1px solid #3a3a3a;
    margin: 20px;
    padding: 10px;
    }

.month-wrapper h3 {
    color: #3a3a3a;
    font-variant: small-caps;
    }

.month table {
    margin: auto;
    width: 90%;
    }

.month table th {
    border: 1px solid #3a3a3a;
    color: #da2400;
    padding: 5px;
    text-align: center;
    }

.month table td {
    border: 1px solid #3a3a3a;
    border: none;
    }

.month caption {
    display: none;
    }

.month .day {
    border: 1px solid #3a3a3a;
    padding: 5px; 
    }

.day-has-entries {
    background-color: #3a3a3a;
    color: ;
    padding: 2px;
    }

#content .day-has-entries a {
    color: ;
    }

#content .day-has-entries a:visited {
    color: ;
    }

#content .day-has-entries a:hover {
    color: ;
    }

#content .day-has-entries a:active {
    color: ;
    }

.day-empty {
    border: 1px solid #3a3a3a;
    }

.month .day-has-entries a {
    font-size: 1.25em;
    font-weight: bold;
    }

.day-has-entries p {
    margin: 3px !important;
    text-align: right;
    }

.month .footer {
    margin: auto;
    text-align: center;
    width: 90%;
    }

#archive-month dt {
    font-weight: bold;
    }

#archive-month .entry-title {
    display: inline-block;
    padding-left: 5px;
    }

/* Tags Page
***************************************************************************/

.page-tags .tags-container {
    margin: 5px 10px 0 10px;
    }

.page-tags .tags-container h2 {
    border-bottom: 1px solid #3a3a3a;
    color: #3a3a3a;
    font-variant: small-caps;
    margin-bottom: 10px;
    }

.page-tags .tags-container ul li {
    list-style: disc;
    margin-left: 50px;
    padding: 0 5px 5px 5px;
    }

/* Icons Page
***************************************************************************/

.page-icons .icons-container {
    margin: 10px 10px 0 10px;
    }

.page-icons .icons-container h2 {
    border-bottom: 1px solid #3a3a3a;
    color: #3a3a3a;
    font-variant: small-caps;
    margin-bottom: 10px;
    }

.page-icons .icon {
    border-bottom: 5px solid #3a3a3a;
    margin: 0 10px 20px;
    padding: 10px 0;
    }

.page-icons .keywords ul {
    margin-left: 0;
    }

.page-icons .keywords ul li {
    padding: 0;
    }

/* Modules
***************************************************************************/

.module-header {
    border-bottom: 0px solid #2C2825;
    background-color: #2C2825;
	text-transform: uppercase;
	color: #3a3a3a;
	padding-left: 7px;
    }

/* Restore colors overridden by #content 
#content .module a { color: ; }
#content .module a:visited { color: ; }
#content .module a:hover { color: ; }
#content .module a:active { color: ; }*/

#content .module-header a {
    color: #3a3a3a;
    }

.module-section-one ul,
.module-section-two ul {
    list-style-type: none;
    margin: 0;
    }

.module-section-one li,
.module-section-two li {
    padding: 2px 0 0 5px;
    text-transform: lowercase;
    }

.module-section-one .module,
.module-section-two .module {
    margin: 10px 10px 10px 20px;
    }

.two-columns #tertiary .module-section-two .module-header,
.two-columns #tertiary .module-section-two .module-content {
    margin: 10px 10px 10px 20px;
    }

.module-userprofile .module-content {
    text-align: center;
    }

.module-userprofile .userpic img {
    border: 5px solid #464646;
    text-align: center;
    }

.module-userprofile ul {
    margin-top: 20px;
    }

.module-userprofile .icon-links li {
    padding: 5px; 
    }

.module-credit .module-content {
    text-align: center;
    }

.module-calendar table {
    font-size: .7em;
    margin: auto;
    text-align: center;
    width: 100%;
    }

.empty-day {
    padding: 5px;
    }

.entry-day {
    background-color: #464646;
    color: #ffffff;
    padding: 5px;
    }

#content .entry-day a { 
    color: #3a3a3a;
    text-decoration: none;
    }

#content .entry-day a:visited { 
    color: ;
    }

#content .entry-day a:hover {
    color: #eaeaea;
    text-decoration: underline;
    }

#content .entry-day a:active {
    color: ;
    text-decoration: underline;
    }

/* Footer
***************************************************************************/

#footer {
    text-align: center;
    }

/* Contextual Pop-ups
***************************************************************************/

div.ContextualPopup {
    background: #eaeaea;
    color: #000000;
    margin: auto;
    text-align: left;
    }

div.ContextualPopup div.Inner {
    background: #ffffff;
    color: #000000;
    border: 1px solid #464646;
    }

div.ContextualPopup .Userpic {
    background: #464646;
    border: none;
    padding: 5px;
    margin:  5px;
    }

div.ContextualPopup .Content {
    background: #ffffff;
    color: #000000;
    border: none;
    margin: auto;
    }

div.ContextualPopup div.Inner a,
div.ContextualPopup div.Inner a:visited,
div.ContextualPopup div.Inner a:link {
    color: #da2400;
    text-decoration: none !important;
    }

div.ContextualPopup .Relation {
    text-transform: lowercase;
    }

/* Navigation Strip
***************************************************************************/

#lj_controlstrip td {
    background: #ffffff;
    color: #000000;
    border: solid 0px;
    }

#lj_controlstrip input {
    background: #eaeaea;
    border: 1px solid #464646;
    color: #000000;
    }

#lj_controlstrip a,
#lj_controlstrip_statustext,
#lj_controlstrip .ljuser a b {
    color: #da2400;
    }

.has-userpic .entry .header {
           }
        .has-userpic .comment .header {
           }
        .has-userpic .entry .userpic,
        .has-userpic .comment .userpic {
           margin-top: -60px;
           margin-right: -20px;
           float: right;
           }

Flat | Top-Level Comments Only

HI, love this. Could this have a header added to it?

Like an image in the header? Definitely doable.

yes, I'm just trying to figure out the coding and how and where to add it. :)

You'll probably want to put it in either the #header, #header > div.inner or #canvas > div.inner depending on how you want it to respond to things like browser width and content columns.

Here's an example of how I inserted it simply into the header.

#header {
    width: 75%;
    background-image: url(https://i.imgur.com/646yBWd.png);
    background-size: contain;
}

You can see this live at

iconografik

If this is the placement you're looking for you might want to nudge the nav module down depending on the content in the header image.

Alternatively, if you want it to span the full width of the browser window it would have to modify #canvas > div.inner instead.