Skip to content

Instantly share code, notes, and snippets.

@jalcine
Forked from LeaVerou/dabblet.css
Created September 18, 2012 19:07
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jalcine/3745128 to your computer and use it in GitHub Desktop.
Save jalcine/3745128 to your computer and use it in GitHub Desktop.
Fixed width, fluid background
/**
* Fixed width, fluid background
*/
body { margin: 0; font-family: Futura, sans-serif; }
h1 { margin-top: 0 }
section {
width: 700px;
padding: 2em 9999px;
margin: 0 -9999px;
overflow-x: hidden;
border: solid white;
border-width: .1em 0;
border-bottom-color: rgba(0,0,0,.3);
background: url(img/noise.png) hsl(0, 40%, 70%);
text-shadow: 0 .1em .1em white;
}
section:nth-child(3n+2) { background-color: hsl(180, 30%, 70%) }
section:nth-child(3n) { background-color: hsl(70, 40%, 70%) }
/* Debugging aids */
section,
.wrapper {
position: relative;
outline: 3px solid #b00;
}
section { outline-offset: -.2em }
.wrapper:before,
section:before {
content: 'div.wrapper';
position: absolute;
top: 0; right: 1em;
padding: .2em .5em;
border-radius: 0 0 .4em .4em;
background: #b00;
color: white;
text-shadow: none;
font-size: 130%;
}
section:before {
content: 'section';
}
<section>
<h1>Heading</h2>
<p>Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.</p>
</section>
<section>
<h1>Another heading</h2>
<p>Welsh onion fennel wakame sea lettuce kale bush tomato beetroot radicchio courgette collard greens. Horseradish peanut celtuce gumbo courgette swiss chard coriander squash garbanzo winter purslane. Courgette nori azuki bean garlic sorrel mung bean gourd soybean groundnut.</p>
<p>Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.</p>
</section>
<section>
<h1>Another heading</h2>
<p>Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.</p>
</section>
<section>
<h1>Another heading</h2>
<p>Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.</p>
</section>
<section>
<h1>Another heading</h2>
<p>Bacon ipsum dolor sit amet eiusmod laborum in aliqua. Enim nisi velit shoulder, swine tail in in fugiat esse fatback duis frankfurter nostrud proident. Swine flank nulla turducken minim aliquip beef. Et aute consectetur quis. Drumstick sausage sint beef chicken veniam short loin.</p>
</section>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment