Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Textures and Patterns</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  
  body{margin:0; padding:24px; line-height:1.5; background:#ccc;}
  
  h1 {border-top: 1px solid black; margin:23px 0 0; text-align:center; padding:0; height:24px;}
​
  h1 span { position: relative; top: -24px; padding: 0 20px; background:white;}
  
  div {margin:24px 0; padding:12px; background:white;}
  
  p{margin:0 0 12px; background:rgba(255,255,255, 0.6);}
  
  #ex2 h1{border-color:white; color:white}
  #ex2, #ex2 span{background:url(http://c572.ca/images/bigNoise.png);}
  
  #ex3, #ex3 span{background:url(http://c572.ca/images/tileTest.png) center top;}
  #ex3 span{background-position:center 6px;}
  
</style>
</head>
<body>
  
  <div id="ex1">
    
    <h1><span>Solid Colour</span></h1>
    <p>This is a solid background for comparision with all the other examples.</p>
  
  </div>
  
  <div id="ex2">
    
    <h1><span>Noise Background</span></h1>
    <p>This example use a background of noise. Seams just don't show up in noise, it's purley random, so you can't really tell when one bit-of-random is next to the wrong other-bit-of-random</p>
  
  </div>
  
  <div id="ex3">
    
    <h1><span>Tiling Background</span></h1>
    <p>This example uses a tiling background image. By telling the background on both the container and the span to center horizontally, the columns stay lined up no matter the size of the tile. Then it's just a matter of adjusting the vertical offset.</p>
    
    <h1><span>Tiling Background part 2</span></h1>
    <p>Because this example uses a consistent basline grid, and the height of the background image is the same as the grid, the effect doesn't break as more headings are added.</p>
    
    <h1><span>Tiling Background part 3</span></h1>
    <p>See? It just keeps working. Mostly. The different browseres seem to size the span slightly differently, which can lead to the background on the span being off vertically by a pixel</p>
  
  </div>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers